GoodなWEB作成サークルコミュのこれは簡単!　手軽にあなたもRollover!

画像がロールオーバーで切り替わる。これはとてもシンプルでありながら、いざDreamweaverで実装しようとすると意外と面倒だったり、コードが複雑になりがち。
以前紹介したCSSを使ったロールオーバーも、あまりCSSで複雑なことをしたくない人にとっては厄介なやり方だと思う。もっとシンプルにできないだろうか？

そこで軽くて(たった4KB!)とても便利なJSを発見、実装してみた。

http://www.dnolan.com/code/js/rollover　でrollover.jsをダウンロードしておく。

画像を用意しておくのだが、2枚用意する。通常の状態の画像が一つ、オーバー時の状態の画像が1つ。オーバーした時の画像は　_o　（アンダーバー小文字のオー）としておくこと。

htmlの方にはJavascriptを読み込んでおく。DWだとウィンドウ→アセットの下から三番目の巻物のようなボタンがJavascriptファイルになるのでここにrollover.jsが表示されていることを確認。rollover.jsを選択し、一番下の「挿入」ボタンを押す。

画像を配置したらコードの表示に切り替え、imgタグの最後に　class="imgover"　と記述。

ブラウザで確認するとこのようになる。
http://clip.180r.com/dreamWtest/roll/

持っておくと便利なDOMの一つだね。

コメント(2)

最初
全て
最新の40件

[2] mixiユーザー 01月31日 20:14

ポイント

○ということは、大量に画像があって、それぞれ_o.jpgというオーバー画像さえ作っておけば、class="imgover"を指定するだけでそれぞれロールオーバーができる。
○例えばリンクボタンやナビゲーションメニューなどに対してもCSSで記述するよりなんとも手軽にロールオーバーが実装できるわけで、ついつい使ってしまう。
△基本的に画像サイズは同じpxサイズで作っておく。

ログインすると、みんなのコメントがもっと見れるよ