css 缩略图 显示大图

来源：百度知道 编辑：UC知道 时间：2024/06/15 13:37:47
下了一段代码，主要是想实现点击下方的缩略图，上方变换相应的大图，代码如下：
<script language="javascript">

ResetThumbs();
ShowThumb(document.getElementById("thumbnail_1"));

function ResetThumbs()
{
document.getElementById("thumbnail_1").style.display = "none";
document.getElementById("thumbnail_2").style.display = "none";
document.getElementById("thumbnail_3").style.display = "none";
}

function ShowThumb(thumb)
{
ResetThumbs();
thumb.style.display = "";
}

</script>

空间不支持Javascript，如何把这段代码转换成纯CSS的代码，谢谢啦
另，大图，小图的位置是固定的

<style type="text/css">
img{
blr:expression(this.onFocus=this.blur());
outline:none;
text-decoration:none;
border:none;
}
.slide{
position:relative;
width:400px;
height:540px;
}

.a_img0:hover .imgab0{ width:400px; height:500px; position:absolute; left:0; top:0px; display:block}
.a_img1:hover .imgab1{ width:400px; height:500px; position:absolute; left:0; top:0px; display:block}
.a_img2:hover .imgab2{ width:400px; height:500px; position:absolute; left:0; top:0px; display:block}
.a_img3:hover .imgab3{ width:400px; height:500px; position:absolute; left:0; top:0px; display:block}

.img0{ width:100px; height:50px; float:left;}
.img1{ width:100px; height:50px; float:left;}
.img2{ width:100px; height:50px; float:left;}
.img3{ width:100px; height:50px; float:left;}

.a_img0 .imgab0{ display:none;}
.a_img1 .imgab1{ display:none;}
.a_img2 .imgab2{