devirtuoso.comより、スクリプト設置なしでCSSだけで作る画像ギャラリーの紹介です。
サイトには、設置方法が記載されています。下図がまさにそのイメージ図です。

以下がマークアップ例です。
HTML
<div id="wrapper">
<!-- Tabs -->
<ul>
<li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
<li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
<li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
<li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
</ul>
<!-- Images -->
<div id="images">
<div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
<div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
<div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
<div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
</div>
</div>
CSS
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
/* Setup Tabs */
ul{
background:#000;
width:125px; /* Width of Tab Image */
float: left;
list-style: none;
border-right:8px solid black;
}
ul li{
height:75px; /* Height of Tab Image */
}
/* Setup Tab so normal opacity is 40 and rollover is 100 */
ul li a img{
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter:alpha(opacity=40);
/* CSS3 standard */
opacity:0.4;
}
/* Change Opacity to 100% on roll over */
ul li a:hover img{
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1.0;
}
/* Places images to the right of the tabs,
and hides non selected images */
#images{
width:500px;
height:300px;
overflow:hidden; /* Hides the non selected images */
float:left;
}
/* Places a black border around the entire viewer
and centers it on the screen */
#wrapper{
width:633px;
height:300px;
border:8px solid black;
margin:0px auto;
}
コメント