额 给你讲讲思路吧：
1、首先用html写出图片标签img和展示图片的区域div
2、为每张图片注册事件侦听器mouseover,当鼠标移动到该图片时，触发事件侦听器(也就是相应的js函数),获得图片的地址，然后将展示区域的 img.src修改成当前获得的地址即可。
剩下的就是实现了。。。写了个 你看看，要运行，把里面的图片，换成你电脑里的就行了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#showImg{
width:200px;
height:200px;
border:#000000 1px solid;
}
</style>
<body>
<div id="imgs">
<img src="png-0001.png" />
<img src="png-0002.png" />
<img src="png-0003.png" />
<img src="png-0004.png" />
</div>
<div id="showDiv">
<img id='showImg' src="png-0001.png" />
</div>
</body>
<script language="javascript">
function initImg()
{
var imgs=document.getElementById('imgs').getElementsByTagName('img');//返回一个img集合的数组
for(var i=0;i<imgs.length;i++)
{
var path=imgs[i].src;//获得图片路径
show(imgs[i],path);
}
}
function show(img,path)
{
var imgObject=new Image();
imgObject.src=path;
var showImg=document.getElementById('showImg');
if(img.addEventListener)//w3c标准 添加事件侦听器(事件触发函数)方式
{
img.addEventListener('mouseover',function(){showImg.src=imgObject.src;},false);
}
else //IE添加事件侦听器(事件触发函数)方式
{
img.attachEvent('onmouseover',function(){showImg.src=imgObject.src;});
}
}
window.onload=initImg;
</script>
</html>