TOP  >  WebDesign  >  JavaScript, Ajax、CSSで実現するツールチップ集「30+ Tooltips Scripts」 カーソルを合わせるとぴょんと飛び出すツールチップ。以前「javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」」や「半透明・角丸のツールチップを表示するJavaScript 「CoolTips」」といくつかDesigndevelopでも紹介してきましたが、今日紹介するのはそんなツールチップのスクリプトを集めたエントリー「30+ Tooltips Scripts」です。 Tooltip.js 主にJavaScript, Ajax、CSSを使って実現しています。沢山のToolTipsが紹介されていますが、今日はその中から気になったToolTipsが公開されていますので下記に貼り付けておきます。 詳しくは以下

ページ内を自由に移動でき、フロートするウィンドウを複数同一ページに生成できるスクリプトが今回紹介する「Mocha」です。 Mochaで生成したフロートウィンドウは拡大、閉じるボタン付きで、マウスのドラッグ操作での移動も可能。日本語表示もOKとかなり自由度の高いウィンドウとなっています。 詳しくは以下 表示させるだけでなくフォームを使って新しいウィンドウも作り出せるようになっています。ウィンドウを生成するフォーム上ではリンクや太字などのHTMLが通るみたいで、画像タグなんかも問題が無く表示されるようになっています。 ダウンロードできるパッケージにはサンプルページとcss、そしてスクリプトが同封されていて、サンプルページを見ながら改変すれば色々と使えそうです。またデザインもCSSで制御されているみたいなので、上手く使えば色々な所に活用できそうです。Mochaはmootoolsのプラグインでスク

FLASHでのスライドショーは色々とカスタマイズできて見栄えも良くクリエイティブな感じですが、当然FLASHの取得がある程度必要になってきますし、カスタマイズも普段コードばっかり描いてる人には少し厄介です。今回紹介するのはFLASHのようなクリエイティブなスライドショーをJavascriptで実現させた「COULOIR」です。 写真の切り替えエフェクトやデザインはかなりシンプルでどんなサイトでも合うデザインになっています。機能的にはスライドショーとしての最低限の機能が実装されているという感じです。動作デモは「Couloir.org: Resizing, Fading Slideshow Demo」です。 このスライドショーの実装にはprototype、moo.fx、soundmanagerなどの既存のライブラリが必要ですが、配布元にはこれらのライブラリも含めて配布してくれているのでダウンロ

AJAXベースで動く掲示板スクリプト「JibberBook 2」。シンプルな作りで動きも軽く分かりやすいため、どんなデザインのページでも違和感無くとけ込ませる事ができるかと思います。 書き込むと、画面が切り替わる事無くそのまま掲示板に追加され、スクロールしながら書き込んだ内容が表示されます。ページデモは以下のテキストリンクから JibberBook 2デモページ 管理用パネルデモページ この掲示板は動きをJavaScriptライブラリ「mootools」を利用して制御していて、掲示板自体はサーバー側でPHPで動作しているというものです。ドネーション形式ですのでフリーで利用するする事ができます。スクリプトのダウンロードは「JibberBook 2 – Free AJAX Guestbook」にアクセスしての右側のDownLoadボタンからダウンロード可能です。 デザインは同封の「theme」

WEBサイトでたまに見かけるリボンがけの処理を簡単に自分のものにできるサービスが今回紹介する「Online Ribbon Generator Tool」です。このサービスではリボン画像の生成と合わせてサイトに貼付けるコードも生成してくれます。 リボンのほうもかなりカスタマイズが可能で縁飾りや色など調整が可能で、打ち込む文字も書体も選択が可能でかなり作り込んだものが生成できます。 詳しくは以下 リボンの作り方は簡単でリボンのテキストを打ち込んで、フォントとサイズ、フォントのカラー、リボンの処理や色を指定して「Generate Ribbon!」ボタンを押します。途中でデザインを確認したい所は「Apply」ボタンを押せばプレビューに反映されます。 サイトの幅が微妙なのでいまいち決まりませんが、このエントリーにリボンをかけてみました。コードはjavascriptで書かれていますので、javaが対応

CSSとJavaScriptで作られた、動きのあるシンプルなドック型メニュー「Webber 2.0 Dock Menu」を紹介したいと思います。 こちらのメニューは透明のプレートが上から出てくるタイプのメニューで、使われている画像が透明なのでサイトに重なりができ、サイトに奥行きをあたえることができます。 詳しくは以下 導入に当たって このメニュー作りが少し変わっていて、透明部分がPNG画像によって表現されていますのでIE6以下では正常に透明に見えません。広く互換性を持たせるなら画像をgifにするか透明をJpgで色付きにするかしなければいけません。幅広いユーザーを目的としているなら注意したい所です。 ユーザーインターフェイスの面から 以前こういったメニューを使っていましたが、隠れているものを引き出して使うと言うことをユーザーにしてもらわないといけないので使いにくいと言う印象を与えてしまう恐れ