超简单的纯CSS代码实现的图片浏览器

纯CSS代码实现的图片浏览器示例：
[url]http://www.vejia.com/code/imgViewer.html[/url]

<style>
.out table,.out table td{
border-collapse:collapse;
background:#000;
border:#000 solid 3px;
}
.out table tr td a img{
height:75px;
width:75px;
border:0px;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40,finishOpacity=40,style=0);
}
.out table tr td a:hover img{
opacity:1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishOpacity=100,style=0);
}
.out table tr td div div img,.out table tr td div{
height:315px;
width:500px;
}
.out table tr td div{
overflow:hidden;
}
</style>
<div class="out">
<table>
<tr>
<td><a href="#img1"><img src="http://www.vejia.com/wp-content/uploads/2011/05/timthumb1.jpg"></a></td>
<td rowspan="4">
<div>
<div><a name="img1"></a><img src="http://www.vejia.com/wp-content/uploads/2011/05/timthumb1.jpg"></div>
<div><a name="img2"></a><img src="http://www.vejia.com/wp-content/uploads/2011/04/timthumb1.png"></div>
<div><a name="img3"></a><img src="http://www.vejia.com/wp-content/uploads/2011/04/9157098-1_e.jpg"></div>
<div><a name="img4"></a><img src="http://www.vejia.com/wp-content/uploads/2011/04/71ec5295jw6dfl27q3nxcj-231x300.jpg"></div>
</div>
</td>
</tr>
<tr>
<td><a href="#img2"><img src="http://www.vejia.com/wp-content/uploads/2011/04/timthumb1.png"></a></td>
</tr>
<tr>
<td><a href="#img3"><img src="http://www.vejia.com/wp-content/uploads/2011/04/9157098-1_e.jpg"></a></td>
</tr>
<tr>
<td><a href="#img4"><img src="http://www.vejia.com/wp-content/uploads/2011/04/71ec5295jw6dfl27q3nxcj-231x300.jpg"></a></td>
</tr>
</table>
</div>