解决WAP端用Dreamweaver画热点偏移现象

来源：互联网发布：电子名片制作软件编辑：程序博客网时间：2024/06/06 05:48

相信很多人都遇到过用Dreamweaver来给专题页面画热点，但是有些时候WAP端会出现热点偏移的现象，接下来教大家如何解决这一现象。

先给图片加热点，代码如下：

这里写图片描述

<html><head>  <meta charset="UTF-8">  <!--移动端缩放-->  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--引入jquery-->  <script src="js/jquery.js"></script>  <title>Document</title>  <style>      *{        margin:0;        padding:0;      }      .wrap{        max-width: 640px;        margin: 0 auto;        position: relative;      }      img{          border: 0;          max-width: 100%;          vertical-align: middle;      }  </style></head><body>    <div class="wrap">        <img src="images/demo-1.jpg" usemap="#Map" border="0">        <map name="Map">          <area shape="rect" coords="38,16,151,123" href="#A">          <area shape="rect" coords="194,15,306,124" href="#B">          <area shape="rect" coords="349,16,462,124" href="#C">        </map>    </div></body></html>

这时候用浏览器看的话会出现热点偏移现象：

这里写图片描述

这时候加js代码解决：

<script>        $("img[usemap]").each(function () {            var img = $(this);            var newImg = new Image();            newImg.onload = function () {                $("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {                    var val = $(this).attr("coords").split(",");                    for (var i in val) {                        val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);                        newImg.width;                    }                    $(this).attr("coords", val.join(","));                })            };            newImg.src = img.attr("src");        });    </script>

效果如下：

这里写图片描述

完整代码如下：

<html><head>  <meta charset="UTF-8">  <!--移动端缩放-->  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--引入jquery-->  <script src="js/jquery.js"></script>  <title>Document</title>  <style>      *{        margin:0;        padding:0;      }      .wrap{        max-width: 640px;        margin: 0 auto;        position: relative;      }      img{          border: 0;          max-width: 100%;          vertical-align: middle;      }  </style></head><body>    <div class="wrap">        <img src="images/demo-1.jpg" usemap="#Map" border="0">        <map name="Map">          <area shape="rect" coords="38,16,151,123" href="#A">          <area shape="rect" coords="194,15,306,124" href="#B">          <area shape="rect" coords="349,16,462,124" href="#C">        </map>    </div>    <script>        $("img[usemap]").each(function () {            var img = $(this);            var newImg = new Image();            newImg.onload = function () {                $("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {                    var val = $(this).attr("coords").split(",");                    for (var i in val) {                        val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);                        newImg.width;                    }                    $(this).attr("coords", val.join(","));                })            };            newImg.src = img.attr("src");        });    </script></body></html>

啰嗦了一点，只为了凑个字数，哈哈哈哈。 —by.nick

阅读全文

2 0