最も洗練されたロールオーバー

最終更新日: 2007年5月11日 15:03

下準備

1:http://www.dnolan.com/code/js/rollover/ のページ一番下から、「rollover.js」をダウンロードします。

2:<head>内に以下のように入力します。(.jsまでのパスは適宜書換えて下さい)

<script src="rollover.js" type="text/javascript"></script>

3:ロールオーバー前とロールオーバー後の画像を用意します。注意点として、ロールオーバー後の画像ファイルは、ロールオーバー前の画像のファイル名の末尾に「_o」とつく形式にして下さい。例:image.jpgとimage_o.jpg

but.gif but_o.gif

たったこれだけでOK!

実際にロールオーバーを動かす

マウスカーソルを乗せて下さい

ギミック

<img src="but.gif" class="imgover" alt="マウスカーソルを乗せて下さい" width="289" height="226" border="0" />

imgタグ内に「class="imgover"」と追記するだけ!Dreamweaverの吐き出していたロールオーバーのソースコードの煩雑さと比べてシンプルで使いやすいですね。imgタグ内にロールオーバーの命令をするので、リンクを貼っていなくても動くのもミソです。