您的位置：首页 > 其它

随浏览器大小变化的图片，如何做相当于热点的链接或点击事件

2014-07-30 12:25 267 查看
网页中的一张图片，在该图中有多处热点链接，如果不随着浏览器的宽高变化而变化，用在dw热点工具就可以了，但如随浏览器大小宽高变化，相对应的热点链接在图片中的位置还是不变，该怎么弄？

下面做个模拟热点,ie8以下需要 js控制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link type="text/css" rel="stylesheet" href=""  />

<style type="text/css">
div,body,img{margin:0;padding:0}
.root{border:1px solid black;width:100%}
.wrapper{width:500px;position:relative;border:1px solid red;}
.wrapper img{width:100%}
.one{width:10%;height:20%;position:absolute;left:10%;top:10%;border:1px solid yellow;background:url(transparent.gif)\9;}
.two{width:10%;height:10%;position:absolute;left:50%;top:50%;border:1px solid red;background:url(transparent.gif)\9;}
@media screen and  (max-width: 500px) {
.wrapper {width: auto;}
}

</style>
</head>
<body>
<div  class="root">
<div class="wrapper"  >
<img src="01.jpg"  />
<div  class="one" onclick="alert('one')">

</div>
<div  class="two" onclick="alert('two')">

</div>
</div>
</div>
</body>
</html>


</pre><p></p><pre>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航