HTML map标签与area标签图片热区使用说明

‭‭一笑奈何‭

已于 2023-07-18 15:49:44 修改

阅读量123

点赞数

文章标签：前端 javascript 开发语言

于 2023-07-18 15:48:09 首次发布

本文链接：https://blog.csdn.net/weixin_45792390/article/details/131789188

版权


<!-- pc-->
<div class="imgWrap">
<img class=" hide-sm lazyload imgFl img imgmap " data-sizes="auto" src="/s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_1800x.webp?v=1689314957" usemap="#image-map-web" data-srcset=" 
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_800x.webp?v=1689314957 800w,
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_1200x.webp?v=1689314957 1200w,
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_1400x.webp?v=1689314957 1400w,
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_1600x.webp?v=1689314957 1600w,
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1_1800x.webp?v=1689314957 1800w,
  /s/files/1/0554/8294/1627/files/summer_fun_7.12_pc_1.webp?v=1689314957 1920w,
  "> <!-- Image Map Generated by http://www.image-map.net/ --> <map name="image-map-web" id="image-map-web"> 
<area target="" alt="Rover Step-Thru Electric Bike" title="Rover Step-Thru Electric Bike" href="/products/velowave-rover-step-thru-electric-bike" coords="6,318,1918,993" shape="rect">
 
<area target="" alt="Prado S Commuter Electric Bike" title="Prado S Commuter Electric Bike" href="/products/velowave-prado-s-commuter-electric-bike" coords="0,1135,1918,1755,5,1132,3,1123,1915,1106,1310,1084" shape="rect">
 
<area target="" alt="Pony Step-Thru Electric Bike" title="Pony Step-Thru Electric Bike" href="/products/velowave-pony-step-thru-electric-bike" coords="0,1834,1908,2408" shape="rect">
 </map>
</div>
<!--mob -->
<div class="imgWrap">
<img class="hide-md hide-lg  lazyload imgFl img" data-sizes="auto" src="/s/files/1/0554/8294/1627/files/summer_fun_7.12_3_100x.webp?v=1689330210" usemap="#image-map" data-srcset="
      /s/files/1/0554/8294/1627/files/summer_fun_7.12_3_300x.webp?v=1689330210 300w,
      /s/files/1/0554/8294/1627/files/summer_fun_7.12_3_390x.webp?v=1689330210 390w,
      /s/files/1/0554/8294/1627/files/summer_fun_7.12_3_400x.webp?v=1689330210 400w,
      /s/files/1/0554/8294/1627/files/summer_fun_7.12_3_500x.webp?v=1689330210 500w,
      /s/files/1/0554/8294/1627/files/summer_fun_7.12_3_600x.webp?v=1689330210 700w,
      "> <map name="image-map"> 
<area target="" alt="Rover Step-Thru Electric Bike" title="Rover Step-Thru Electric Bike" href="/products/velowave-rover-step-thru-electric-bike" coords="2,112,399,490" shape="rect">
 
<area target="" alt="Prado S Commuter Electric Bike" title="Prado S Commuter Electric Bike" href="/products/velowave-prado-s-commuter-electric-bike" coords="1,594,398,968" shape="rect">
 
<area target="" alt="Pony Step-Thru Electric Bike" title="Pony Step-Thru Electric Bike" href="/products/velowave-pony-step-thru-electric-bike" coords="3,1024,397,1425" shape="rect">
 </map>
</div>


<script>
  var initwidth=null,//初始图片宽度
      area=document.getElementsByTagName('area'),
      initarea=null;//初始数据保存
       
  function init(){//初始化
      initwidth=1920;
      initarea=new Array(area.length-1);
      for(var i=0;i<area.length;i++){
          initarea[i]=area[i].getAttribute("coords");
      }
  }
   
  function setCoords(){//根据分辨率自适应热区坐标
      var width=document.body.offsetWidth,
          percent=width/initwidth;
      for(var i=0;i<area.length;i++){
          var coords=initarea[i],
              arr=coords.split(",");
          for(var j=0;j<arr.length;j++){
              arr[j] *= percent;   
          }
          area[i].setAttribute("coords",arr.join(","));
      }
  }
  //使用
  init();
  document.addEventListener('DOMContentLoaded', setCoords);
  window.onresize = function () { 
      setCoords();
  } 

  </script>