CSS+DIV实现图片动态显示_红风的文摘库_百度空间企业库|免费b2b网站

CSS+DIV实现图片动态显示_红风的文摘库_百度空间

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Show Photo</title>

function ImageDivMouseOver(obj)

{

document.getElementById(obj).style.left=window.event.x+15+document.documentElement.scrollLeft;

document.getElementById(obj).style.top=window.event.y+15+document.documentElement.scrollTop;

}

</script>

.showImage a{

display:block;/**//*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

.showImage a img{

display: none; visibility:hidden;/**//*初始化信息面板不显示*/

}

.showImage a:hover{_border:none;text-decoration:none;}/**//*IE7以下版本A状态伪类bug*/

.showImage a:hover img{

display:block;

visibility:visible;

position: absolute;

display:block;

width: 139px;/**//*只给出宽度，高让它随内容多少自动调整*/

border: 1px solid rgb(91,185,233);

background-color: rgb(228,246,255);

z-index:999;/**//*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

.showImage a img{

border:none;/**//*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

display:block;

position: absolute;/**//*用{jd1}定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

left:80px;

top:30px;

}

.imgStyle{z-index:10px; position:absolute}

</style>

</head>

<body>

<form>

<div class="showImage"><a href="#" onmouseover="ImageDivMouseOver('img1')">{dy}个图片显示链接<img id="img1" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"></img></a>

<br />

<a href="#" onmouseover="ImageDivMouseOver('img2')" >第二个图片显示链接<img id="img2" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"/></a>

<br />

<a href="#" onmouseover="ImageDivMouseOver('img3')" >第三个图片显示链接<img id="img3" src="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" class="imgStyle"/></a></div>

</form>

</body>

</html>

优化内容:

1.跟随鼠标

2.增加考虑滚动条因素

3.图片最前位置显示

郑重声明：资讯【CSS+DIV实现图片动态显示_红风的文摘库_百度空间】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——