マウスが重なったら画像を切り替える（ロールオーバー）

説明

マウスが画像の上に重なったら画像を入れ替える、離れたら元の画像に戻すといったロールオーバーの処理はonmouseoverイベントとomouseoutイベントを利用します。従来はHTMLタグの<a>または<img>タグ内にイベントを記述していますが、DOMが利用できるブラウザではサンプルのように特定の領域に限定して画像のロールオーバーを行うことができます。画像のロールオーバーは<img>タグ自身のsrcプロパティを入れ替えるためthis.srcとして指定し表示する画像URLを指定します。
サンプルでは元の画像ファイル名に_overを追加したものをロールオーバー画像として設定しているため、以下のように画像ファイル名が設定されていないと動作しません。

menu1.gifタブ項目1の標準画像
menu1_over.gifタブ項目1のロールオーバー画像
menu2.gifタブ項目2の標準画像
menu2_over.gifタブ項目2のロールオーバー画像
menu3.gifタブ項目3の標準画像
menu3_over.gifタブ項目3のロールオーバー画像

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>マウスが重なったら画像を切り替える</h1>
<div id="mainMenu">
<img src="images/menu1.gif" width="84" height="24">
<img src="images/menu2.gif" width="84" height="24">
<img src="images/menu3.gif" width="84" height="24">
</div>
</body>
</html>
window.onload = function(){
var rootNode = document.getElementById("mainMenu");
var imgTag = rootNode.getElementsByTagName("img");
for (var i=0; i<imgTag.length; i++){
imgTag[i].onmouseover = function(){
this.src = this.src.split(".gif")[0]+"_over.gif";
}
imgTag[i].onmouseout = function(){
this.src = this.src.split("_over.gif")[0]+".gif";
}
}
}