タグ

ロールオーバーに関するmagpepenのブックマーク (2)

  • 『ロールオーバー今昔物語』サポートページ

    鷹野雅弘(スイッチ) 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー(マウスオーバー)とは? マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字

  • 透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた

    以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記(09/07/24) 若干修正し、2.1にバージョンアップしました。 (今までのでも問題なく動作します。) ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ

    透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
  • 1