当鼠标移上文字上方时,显示对应的图片.此方法兼容IE,FF,谷歌浏览器
1.event必须从外面传入.在FF才能正常运行
2.在给Layer1赋值是,FF,谷歌浏览器要求加上单位,此外为px
3.在FF在,加2单位的偏移量,不加的情况下鼠标被显示的层挡住,以致图片闪动或在某点出现一次.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标悬停文字上显示图片</title>
<script language="javascript">
function showPic(e,sUrl){
var x,y;
x = e.clientX;
y = e.clientY;
document.getElementById("Layer1").style.left = x+2+'px';
document.getElementById("Layer1").style.top = y+2+'px';
document.getElementById("Layer1").innerHTML = "<img border='0' src=\"" + sUrl + "\">";
document.getElementById("Layer1").style.display = "";
}
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
</script>
</head>
<body>
<div id="Layer1" style="display: none; position: absolute; z-index: 100;">
</div>
<img src="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout="hiddenPic();"
onmousemove="showPic(this.src);" />
<p>
<a href="" onmouseout="hiddenPic();" onmousemove="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg');">
当鼠标指到标题时,鼠标显示对应图片</a>
</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标悬停文字上显示图片</title>
<script language="javascript">
function showPic(e,sUrl){
var x,y;
x = e.clientX;
y = e.clientY;
document.getElementById("Layer1").style.left = x+2+'px';
document.getElementById("Layer1").style.top = y+2+'px';
document.getElementById("Layer1").innerHTML = "<img border='0' src=\"" + sUrl + "\">";
document.getElementById("Layer1").style.display = "";
}
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
</script>
</head>
<body>
<div id="Layer1" style="display: none; position: absolute; z-index: 100;">
</div>
<img src="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout="hiddenPic();"
onmousemove="showPic(this.src);" />
<p>
<a href="" onmouseout="hiddenPic();" onmousemove="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg');">
当鼠标指到标题时,鼠标显示对应图片</a>
</p>
</body>
</html>
