シンプルなコードでロールオーバーを実現する。

先日、担当デザイナーの不在中、とあるサイトの修正を急遽行う事になったため、どうしたことか私におはちが回ってきた。
今回は「急遽」のため、担当デザイナーのクセに合わせた修正を行った。ファイルの命名方法とか、データーの置き場所はわかりやすく・・とか。
その作業中に奇妙なことに気がついた。
ロールオーバーがすごくシンプルなのである。
ごく一般的に使われている手法ではない。
そういうわけで、ちょっと検索してみると・・結構あるんですね。シンプルなやり方。


まずは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 ロールオーバーは、これまで以上に心おきなく使えるスクリプトです。
勿論、使用は自己責任でお願いします。

“シンプルなコードでロールオーバーを実現する。” への2件の返信

  1. 初めまして。
    トラックバックありがとうございます。
    こちらのエントリの指摘で気付いたのですが、記事内のソースが一部古くなっており、onloadがバッティングした際の処理が無くなっておりました。
    ソースの方修正しておきましたので、そちらを使用していただければと思います。
    ご指摘ありがとうございました。

  2. 初めまして。コメントありがとうございます。
    現状のソースを使えば、バッティングしないんですね。
    こちらのブログも書き換えておかなくては・・。
    今後も有益な情報をよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です