Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。(あ、音声ブラウザを配慮したらという場合です)

さて、本題に。

CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。
ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。


jsファイルのご用意

何はともあれ、下記のjsファイルをご用意します。

function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");
		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off."))
			{
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}
if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}

ダウンロードしたい方は以下より。
smartRollover.js

んで、コレを外部ファイルとして読み込ませる。
こんな感じで。

<script type="text/javascript" src="smartRollover.js"></script>

記述する場所はhead要素内でございます。

画像のご用意

通常時の画像と、ロールオーバー時の画像を別々で用意して、以下のようにファイル名の最後に「_on」「_off」とつけます。

  • menu_on.gif
  • menu_off.gif

ソース

_offの画像をご自由に指定します。

<p>
<a href="/"><img src="./menu_off.gif" alt="HOME" /></a>
</p>

サンプルページ

サンプルページで実際の動作を見てみる

仕様とか

JSに関しては殆ど無知なんで、知り合いに頼んで作ってもらった訳でございますが、取りあえず、ファイル名の最後に「_off」ってついてる場合、同名の「_on」のファイルに入れ替わるって感じです。
ですので、間違って_offってファイル名に付けた場合_onを探しにいって×とか出る可能性があるのでご注意を。
サンプルはgifですが、jpgとかpngとかでもOKです。

よく見るロールオーバーのサンプルだとソースがごちゃごちゃしてていけてなかったからJSでのロールオーバーを敬遠してたけど、コレならソースもシンプルなのでいいなーと思った感じです。

ご注意事項とか

  • 改変とかはご自由にどうぞ。
  • 使用用途に関しても制限無しです。ご自由にどうぞ。
  • 万が一コレが原因で何らかの問題が発生しても、ウチでは一切の責任を取りません。
  • 使用に関しては自己責任でお願いします。