先日、担当デザイナーの不在中、とあるサイトの修正を急遽行う事になったため、どうしたことか私におはちが回ってきた。
今回は「急遽」のため、担当デザイナーのクセに合わせた修正を行った。ファイルの命名方法とか、データーの置き場所はわかりやすく・・とか。

その作業中に奇妙なことに気がついた。
ロールオーバーがすごくシンプルなのである。
ごく一般的に使われている手法ではない。

そういうわけで、ちょっと検索してみると・・結構あるんですね。シンプルなやり方。

まずはCSS HappyLifeで紹介されているソースがシンプルなJSによるロールオーバー。
こちらは、該当画像の最後が「_on」「_off」と付けることによって実現させています。
そのため、ロールオーバー画像は絶対「_on」ないし「_off」じゃないと作動しないようです。

オンは「_on」でいいけど、オフは付けたくない！と言う時はmaro-z.comの意外とよく使うJavascript　ロールオーバー で紹介されている方法がオススメ。私が今回遭遇したのもこのスクリプトです。
こちらの場合もオン画像は「_on」にしなければならないものの、該当箇所にclass="rollover"を指定してやるだけで通常画像には「_off」を付けなくていいと言うスクリプトです。

で、意外とよく使うJavascript　ロールオーバー での方法ですが、注意点が一つ。
この方法を使ったページには、Dreamweaverがはき出すロールオーバースクリプトは併用できません。併用してしまうと、意外とよく使うJavascript　ロールオーバー の方法を使用した画像が、まったく動かなくなります。

今度のサイト構築に使いたい逸品です。
勿論、使用は自己責任でお願いします。


2008.09.25追記：
maro-z.com≫意外とよく使うJavascript　ロールオーバーのMaroさんからのコメントの通り、現在は従来のロールオーバースクリプトを併用しても問題なく動くようです。
当該記事が一度飛んでしまったため、googleのキャッシュから復旧したそうですが、その時にスクリプトも巻き戻されてしまった・・と言うのが真相のようです。
と、言うことは、私が修正したサイトのスクリプトも復旧直後に頂いたものだったのでしょうね。

そんなわけで、意外とよく使うJavascript　ロールオーバーは、これまで以上に心おきなく使えるスクリプトです。

勿論、使用は自己責任でお願いします。