はじめに
htmlでのメニュー部分の画像のrolloverは 古くからいくつかの方法がありますが、html,javascriptソースが煩雑になることが どうも好きではありませんでした。最近はjqueryなどの素晴らしいコンポーネントが あり、それを使うことですっきりとしたコードが 書けるのではないかと思っていました。
また、SSIやPHP,CGI用に、メニュー部分はどのページからも同じものを参照でき、 かつ、カレントページのメニュー部分は他の状態と異なるようにしたいという要求も 満たしたいと思っていました。
インターネットで検索したところ、jqueryを使ったrolloverを実現している ソースを公開している方がおられました(http://rewish.org/javascript/jquery_rollover)。 これを元にして、上記の要求を満たすように変更し、 かつ、jqueryのプラグインの書き方も勉強しながらプラグイン化したものが このソースになります。
使用方法
- htmlでrolloverクラスの配下にa要素、その配下にimg要素を記述する。
- img要素に指定する画像を用意し、そのrollover用画像として拡張子前に"_ro"をつけた画像ファイルを用意する。つまり、img要素に指定する画像が
test.gifならtest_ro.gifとなる。 - 表示htmlがa要素にある場合は、そのhref属性値を下記スクリプト中のcurrentオプションで指定することで、rollover状態のままとなる。
- jqueryとこのプラグインを読み込む。
- script要素中に以下の記述を行う。
$(document).ready(function() { $(".rollover a img").rollover({current : './'}); });
例が以下にあります。このページのソースを参照してください。
