//今天遇到一个很纠结的问题，一张图片，鼠标移上去，有另外一张半透明图片浮在原来那张图表层，且没有覆盖原图，由于是
//半透明，所以可以看到底层图片,移开的时候，还原为原图。半透明的时候，可以超链接。纠结了一个1个小时，终于得出结果了。以下是源码。哈哈。
<!DOCTYPE HTML>
<html>
<head>
<title>OverPicture</title>
<style>
#c,#con{
height:100px;
width:100px;
border:1px solid orange;
}
</style>
</head>
<body>
说明：每张图片一个div容器，调用的时候传当前对象和一个容器过去，如下所示：
<div id="con" >
<img src="e.gif" onmouseover="picOver(this,'con','www.baidu.com')" />
</div>
<div id="c">
<img src="e.gif" onmouseover="picOver(this,'c','www.sina.cn')" />
</div>
</body>
</html>
<script>
function picOver(obj,who,url){
obj.style.position="absolute";
obj.style.zIndex=-1; //设置底层
var pic=document.createElement("img"); //创建一个一个表面浮动层
pic.src="a2.gif"; //设置浮动层的图片路径
pic.style.position="absolute";
pic.style.zIndex=1; //设置浮动到表面
pic.style.opacity=0.6; //设置透明度
document.getElementById(who).appendChild(pic); //添加到谁里面
//给表层的图片绑定鼠标移开事件
pic.οnmοuseοut=function(){
obj.style.position=""; //注意：这个一定要写：目的是清空绝对定位，以防影响其他div
document.getElementById(who).removeChild(pic); //删除表面层
}
pic.οnclick=function(){
alert("要链接的url页面："+url);
location.href=url;
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
