マウスが重なったら複数の画像を切り替える

説明

マウスオーバーで複数の画像を入れ替えるには、入れ替える画像のURLを配列として用意するか、そのまま入れ替えを行う関数やメソッドに渡します。サンプルではalbum3.change()に配列として渡しています。実際に画像を入れ替える処理を行うalbum3.change()では渡された配列を参照し画像URLとして設定するだけなので短いコードですみます。
サンプルのように入れ替える画像が特定の領域に含まれるか連続している場合は簡単ですが、そうでない場合にはID名またはスタイルシートのクラス名を参照して画像を入れ替える方法を使います。
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="photoAlbum">
<a href="#" id="changeButton1">グループ(1)を表示</a> |
<a href="#" id="changeButton2">グループ(2)を表示</a><br>
<img src="images/DSC0001.jpg" width="240" height="135">
<img src="images/DSC0042.jpg" width="240" height="135">
<img src="images/DSC0103.jpg" width="240" height="135">
</div>
</body>
</html>
window.onload = function(){
document.getElementById("changeButton1").onmouseover = function() {
album3.change(["images/DSC0001.jpg","images/DSC0042.jpg","images/DSC0103.jpg"]);
}
document.getElementById("changeButton2").onmouseover = function() {
album3.change(["images/DSC0154.jpg","images/DSC0280.jpg","images/DSC1005.jpg"]);
}
}
var album3 = {
change : function(imageArray){
var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img");
for (var i=0; i<imgTag.length; i++){
imgTag[i].src = imageArray[i];
}
}
}