鼠标悬浮图片显示原图，移出鼠标后原图消失（多图）

最近想做个简单的个人网站，需要用到这个功能。在网上搜了一下，发现有很多图片特效，但是代码太纷繁复杂了。

其实我想实现的只是大图预览，不需要太复杂。后来，在原来有的javascript资料里找到这个:)“JavaScript网页设计300例.chm”，

从里面找到了类似的下拉菜单的例子修改了一下，以实现这个功能。

 

具体用法是这样的：

 

将Javascript代码放到</body>前（将脚本代码放在页面底端有助于提高页面速度，但是我现在还没有切身的体会）

 

<script language=JavaScript>

 

function mouseOutPic() //当鼠标移出时，隐藏原图

{

   if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden";

   //如果鼠标不在img000上的话，将这个区域隐藏

}

 

function mouseOverPic(imgSrc) //当鼠标移上小图时，显示原图

{

var seeBig = document.getElementById("bigPic"); //得到将要显示原图区域的div element

var newImg = document.createElement("img"); //新建一个img element，将原图的src赋给这个element

newImg = "<img src=/'" + imgSrc + "/'/>"; //注意这里，是为整个element赋值，我在这个小问题上还花了挺多时间

//alert(imgSrc);

seeBig.innerHTML = newImg; //将原图赋给要显示的区域

}

</script>

 

下面是HTML代码：

 

<!--下面这个ID是img000的element是略缩图，鼠标悬停在它上面即出现原图-->

<!--onmouseover方法中调用了mouseOverPic函数（见上面），传给它的参数是原图的URL-->

<!--调用mouseOverPic之后，将原图显示区域设为可见-->

<img id="img000" src="images/general/emailAt.jpg" onmouseover="mouseOverPic('images/general/usc_badge.jpg'); bigPic.style.visibility='visible'" onmouseout="mouseOutPic()">

 

<!--页面初始化的时候，原图显示区域是隐藏的-->

<div id="bigPic" style="visibility:hidden;">

</div>

 

上面这个代码没有控制原图出现的位置，如果涉及到靠近窗口边缘的位置的话会用到offsetLeft等属性。

仔细想想，其实这个也蛮简单的。写Javascript的需要多多注意细节，这个实在是太重要了，一不小心就会出错，最糟糕的是不知道错在哪里。