JSを使用せずにCSSでオンマウス時に画像が切り替わるタイプ。
ヘッダーのトップ画像切り替えなどに使えますね。
デモ：
HTML
<div id="images-wrap"> <a id="img_a" class="image-link" href="#"> <span>サンプル画像A</span></a><br /> <a id="img_b" class="image-link" href="#"> <span>サンプル画像B</span></a><br /> <a id="img_c" class="image-link" href="#"> <span>サンプル画像C</span></a> <a id="img_d" class="image-link" href="#"> <span>サンプル画像D</span></a> </div>
CSS
#images-wrap { width: 480px; margin: 20px auto; position: relative; }
#img_a { background: url(サンプル画像A) no-repeat; z-index: 2; }
#img_b { background: url(サンプル画像B) no-repeat; }
#img_c { background: url(サンプル画像C) no-repeat; }
#img_d { background: url(サンプル画像D) no-repeat; }
#img_a span { position: absolute; left: 0; bottom: -36px; }
#img_b span { position: absolute; left: 121px; bottom: -36px; }
#img_c span { position: absolute; left: 242px; bottom: -36px; }
#img_d span { position: absolute; left: 363px; bottom: -36px; }
.image-link {
display: block;
width: 480px;
height: 320px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
}
.image-link span {
text-align: center;
width: 106px;
height: 20px;
display: block;
padding: 5px;
background: #555;
color:#fff;
border: 1px solid #aaa;
}
.image-link:hover { z-index: 100; }
.image-link:hover span { background: #333; color:#60afd8;}
a {text-decoration: none; color:#555; }
参考サイト： Simple CSS Image Switcher