热点图 页面缩放不改变位置

修改时间: 2019-05-29 23:48:00 PM

文章时间:2019年5月29日 23:42:02
解决问题:热点图 随着页面的缩放比例而不改变其所在的位置
推荐画图工具:Adobe Dreamweaver CC

jQuery下载地址:http://cdn.hcses.com/jquery/jquery.js
CSS下载地址:http://cdn.hcses.com/common/mobile-style.css

头部我们需要3个东西,请直接复制即可

  <!--移动端缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--引入jquery-->
  <script src="js/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="css/mobile-style.css">

直接复制这段代码然后用设计模式画图就行了。

<span class="wrap"><img src="images/xxxx.jpg" usemap="#Map" border="0">

任意地方加这段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>

全部完整版代码如下:(可直接复制使用)

<!DOCTYPE html>
<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>页面标题</title>
  <link rel="stylesheet" type="text/css" href="css/mobile-style.css">
</head>
<body>
    <span class="wrap"><img src="images/xxxx.jpg" usemap="#Map" border="0">
    <map name="Map">
      <area shape="rect" coords="6,4,62,87" href="index.html">
    </map>
</span>
<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>

添加新评论