欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)

程序员文章站 2022-03-23 13:33:29
具体用法是这样的: 将javascript代码放到前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会) 复制代码 代码如下:...
具体用法是这样的:
将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的需要多多注意细节,这个实在是太重要了,一不小心就会出错,最糟糕的是不知道错在哪里。