ウェブ、ショウジン

CSSによるリモートロールオーバー

2011-2-28
Category
CSS

サムネイル画像があって、その画像にマウスがのると別の場所にある広い領域でその拡大画像が表示される、とかそういうのをJavaScriptでなく、Flashとかでもなく、CSSで。(リモートロールオーバーというらしい)

以前にも一度、なんかまた使うことがあるかと思って記事にして残しておいたけど、全然使うことなかった。だがしかし!今回急に必要になったので、これを機会にもうちょっとキレイにというか、使いやすくして、再度まとめた。

キャプチャした画面イメージ(デモページ
CSSによるリモートロールオーバー・デモ画面_1298886320902

▼HTML

<div id="wrapper">

	<div id="visual_main">

		<div class="stage">
			<img src="./img/dummy_visual_main.gif" width="940" height="295" alt="メインビジュアル" />
		<!-- // stage --></div>

		<ul class="cf">
			<li>
				<a href="#">
					<img src="./img/dummy_thumb_mainvisual1.gif" width="200" height="100" alt="メインビジュアル1のサムネール" />
					<span><img src="./img/dummy_image1.gif" alt="メインビジュアル1" width="940" height="295" /></span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/dummy_thumb_mainvisual2.gif" width="200" height="100" alt="メインビジュアル2のサムネール" />
					<span><img src="./img/dummy_image2.gif" alt="メインビジュアル2" width="940" height="295" /></span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/dummy_thumb_mainvisual3.gif" width="200" height="100" alt="メインビジュアル3のサムネール" />
					<span><img src="./img/dummy_image3.gif" alt="メインビジュアル3" width="940" height="295" /></span>
				</a>
			</li>
		</ul>

	<!-- // #visual_main --></div>

<!-- // #wrapper --></div>

▼CSS

/* マウスオーバーで出現する画像の位置を指定するときに基点となる */
#visual_main{
    position: relative;
}

#visual_main img{
	display:block;
}

/* マウスオーバーで出現する部分で通常は隠れている */
#visual_main a span{
    display: none;
}

#visual_main a:link,
#visual_main a:visited,
#visual_main a:hover,
#visual_main a:active{display:block;}

/* サムネール画像のサイズ */
#visual_main a img{
    width: 200px;
    height: 100px;
}

/* マウスオーバーで出現する画像の場所を指定 */
#visual_main a:hover span{
   display:block;
   position:absolute;
   top:0;
   left:0;
}

/* マウスオーバーで出現する画像のサイズ */
#visual_main a:hover span img{
    width: 940px;
    height: 295px;
}

#visual_main li{
	width:200px;
	height:100px;
	float:left;
}

擬似クラスの部分(下記部分)はa:hoverだけだとSafari, Chromeでは機能しないので注意。(下記ではどれも記述してるけど、a:hoverとa:linkが記述されていれば大丈夫みたいだ)

#visual_main a:link,
#visual_main a:visited,
#visual_main a:hover,
#visual_main a:active{display:block;}

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿