CSSで作る画像の切り替え・・Image Switcher


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

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*