サムネイル画像をマウスオーバーすることで固定位置へメイン画像（大画像）を表示させる方法（画像置換）

Webサイト制作の画像の見せ方において、狭い領域を有効活用したい場合に便利な方法の1つとして、サムネイル画像へのマウスアクションに応じて固定位置へメインの大きい画像を表示するというものがある。

これも画像置換の1つで、jQueryの方にいくつかのプラグインがあるが、今回はフェードやスライドショー機能などがない、簡単な作り方をまとめておく。

制作手順は下記のようになる。
１．必要な画像数分のサムネイル画像とメイン画像（大画像）を用意する。

２．HTMLとCSSでメイン画像表示部とサムネイル画像表示部をそれぞれ希望の見た目になるようにコーディングする。

３．メイン画像（表示部）のimgタグ内にname属性（ここでは"mainImg"とする）を指定する。

４．サムネイル画像（表示部）のimgタグ内に下記のようにマウスオーバー時の動作を指定する。

<img src="img/s01.jpg" width="50" height="50" alt="01" onMouseOver="document.mainImg.src='img/01.jpg'">

"document.mainImg.src"の中にname属性の指定値が書かれていることに注意。
これでサムネイルをマウスオーバー時にname="mainImg"のところに01.jpgが表示される。

以下、コードサンプル。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>サムネイルマウスオーバーメイン画像表示</title>
<style>
body, div, ul, li, img, a {
  margin: 0;
  padding: 0;		
}
ul {
  list-style: none;		
}
a {
  text-decoration: none;		
}
#container {
  width: 600px;
  margin: 0 auto;		
}
p.main {
  width: 588px;
  height: 438px;
  padding: 6px;		
}
#box {
  background:url(img/large_bg.jpg) no-repeat;	/*ドロップシャドウの背景*/
}
ul {
  width: 580px;
  margin: 20px 13px 20px 7px;
}
ul li {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #CCC;
  margin-left: 6px;
}
img {
  cursor: pointer;	
  border: none;
  vertical-align: bottom;	
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<p class="main"><img src="img/01.jpg" width="588" height="438" alt="01" name="mainImg"></p>
<ul>
<li><img src="img/s01.jpg" width="50" height="50" alt="01" onMouseOver="document.mainImg.src='img/01.jpg'"></li>
<li><img src="img/s02.jpg" width="50" height="50" alt="02" onMouseOver="document.mainImg.src='img/02.jpg'"></li>
<li><img src="img/s03.jpg" width="50" height="50" alt="03" onMouseOver="document.mainImg.src='img/03.jpg'"></li>
<li><img src="img/s04.jpg" width="50" height="50" alt="04" onMouseOver="document.mainImg.src='img/04.jpg'"></li>
<li><img src="img/s05.jpg" width="50" height="50" alt="05" onMouseOver="document.mainImg.src='img/05.jpg'"></li>
<li><img src="img/s06.jpg" width="50" height="50" alt="06" onMouseOver="document.mainImg.src='img/06.jpg'"></li>
<li><img src="img/s07.jpg" width="50" height="50" alt="07" onMouseOver="document.mainImg.src='img/07.jpg'"></li>
<li><img src="img/s08.jpg" width="50" height="50" alt="08" onMouseOver="document.mainImg.src='img/08.jpg'"></li>
<li><img src="img/s09.jpg" width="50" height="50" alt="09" onMouseOver="document.mainImg.src='img/09.jpg'"></li>
<li><img src="img/s10.jpg" width="50" height="50" alt="10" onMouseOver="document.mainImg.src='img/10.jpg'"></li>
</ul>
</div>
</div>
</body>
</html>

id="box"を指定したdivタグにドロップシャドウのみの背景画像を設定している。
以下、表示結果。

また、マウスオーバー時にメイン画像が表示されるのではなく、マウスオーバー時はサムネイルがホバー状態になり、マウスのボタンを押した時にメイン画像が表示されるようにする場合は、各サムネイルのホバー時の画像を用意した上で、各サムネイルのimgタグの指定を下記のように書きかえる。

<img src="img/s01.jpg" width="50" height="50" alt="01" onMouseDown="document.mainImg.src='img/01.jpg'" onMouseOver="src='img/s01_o.jpg'" onMouseOut="src='img/s01.jpg'">

注意が必要な点は、マウスがサムネイル上から離れたときにデフォルト状態に戻るようにonMouseOutにデフォルト画像を設定すること。

ちなみにマウスのボタンを押したときではなく、クリック時に反応させたい場合はonMouseDownの代わりにonClickを用いる。

※onMouseDownとonClickの違い