ホームページ制作時にJavaScriptでグローバルメニューなどのボタン画像を切り替えるロールオーバーは、必ず使いますよね。当たり前に使いすぎていて何とも思っていなかったのですが、良く考えるとHTMLソースはかなり長いです。
onmouseover=”MM_swapImage〜 とか onmouseout=”MM_swapImgRestore〜とか。
先日仕事で知り合ったクリエイターの方に便利なJavaScriptを紹介いただきました。
「smartRollover.js」です。ソースがかなり短縮されますし、主要なブラウザでも動作に問題なさそうです。
今後はこちらを利用していくことに決定ですかね。当たり前と思っていることにこそ改善点て多いのかもしれませんね。
以下、覚え書きです。
まずダウンロードします。
smartRollover.js
外部ファイルとしてリンクします。
[html]
<script type="text/javascript" src="js/smartRollover.js"></script>[/html]
従来どおり通常時の画像と、ロールオーバー時の画像を別々で用意し、ファイル名の最後に「_on」「_off」とつけます。これだけで完了です。んー見事です。
bt_about_on.gif
bt_about_off.gif
※例はgifですが、jpgやpngでも利用可能です。
こちらのサイトを詳細が掲載されています。
css happylife