adrufの目指せ鯖缶

Wordpressに限った話ではないですが、メニューなどでよく使われるマウスオーバーによる画像切替を簡単に行うためにどうするかを調査。

CSSで実現する方法もありますが、画像が多いと面倒なのでJavascriptを使うことにしました。

Javascriptでこれを実現するためのスクリプトは数多くありましたが、ソースへの追記が少なくて済むという観点で以下のものがよいなぁ～という結論に。

手軽に画像のロールオーバー効果を実装するJavaScript

prototype.js等外部ライブラリへの依存が一切無いところも良いですね。

【使い方】
　１．マウスオーバーさせる部分のimgタグに「class="rollover"」を追加。
　２．マウスが乗っていないときの画像をa.gifとするとマウスオーバー用にはa_on.gifというように「_on」を追加したファイルを用意する。

これだけです。
ファイルへの追加文字の規則変更等はオプションで指定できます。