求图片切换代码.(追50分)

Question

求高手写一个图片切换代码.
一共4张图.一张大三张小.大的在左.三张小的以上至下的循序排列在大的右边.
鼠标不划过则大图不变.鼠标停留在任何一个小图上.则大图切换为该小图.
并四张图都需要加连接.
帮帮忙.满意追加50分.
4张图中间能稍微有那么1px或者2px距离的间隔么?

margin:1px 0 0 1px把这个加到css里吗?具体是加在那里?我不会.....

Answer 1

50分太少!!
呵呵.

<script>
function changeImage(obj){
var ssrc=obj.src;//取出当前鼠标处的小图片路径
var bsrc=document.getElementById("bigImg").src;//取出大图片的路径
document.getElementById("bigImg").src=ssrc;//让大图片显示为小图片
obj.src=bsrc;//让小图片显示为大图片

//下面的代码没得讲.就是普通的页面.普通的几个控件.普通的css样式.你只要把自己的图片路径换上去就能看到效果了.把所有代码复制粘贴到一个记事本.保存为html文件就可以.
}
</script>
<style>
img{border:none;}
#leftdiv{width:210px;height:300px;float:left;overflow:hidden;}
#rightdiv{width:70px;height:300px;float:left;overflow:hidden;}
.imgdiv{width:70px;height:100px;overflow:hidden;}
</style>

<div id="leftdiv">
<a href="#"><img id="bigImg" width=210 height=300 src="图片1"></a>
</div>
<div id="rightdiv">
<div class="imgdiv"><a href="#"><img width=70 height=100 src="图片2" onmouseover="changeImage(this)"></a></div>
<div class="imgdiv"><a href="#"><img width=70 height=100 src="图片3" onmouseover="changeImage(this)"></a></div>
<div class="imgdiv"><a href="#"><img width=70 height=100 src="图片4" onmouseover="changeImage(this)"></a></div>
</div>

-----------------------

当然可以呀...这是宽和高是我随便写的.你按你自己图片的情况给定宽和高就OK了啊.

位置当然能变.你用的什么布局?留出一个位置来.把这些代码放进去就OK了.

-------------------------

那些css只是控制容器div的.你还得修改图片img的width和height.

-----------------------

所谓容器就是指那些包含img的外层div.
你根据你自己的需要修改它们的宽和高.还有你图片实际大小.也将对应的图片宽和高修改了.
如果你显示的小图片高为200.那么这三张小图片的容器<div id="rightdiv">的高就应该是200*3=600.就是这个意思了.你按你的要求来修改.

---------------------------

你在css里加属性:margin.这个属性的意思该控件与其它控件的间距.如:margin:1px 0 0 1px;就是说该控件与上面的控件间距为1px.左边为1px.