css中imgmap的使用(完成图片中的交互效果)

YSimba13.

已于 2022-07-11 21:04:52 修改

阅读量391

点赞数

文章标签： css 前端 java vue

于 2022-07-06 16:46:30 首次发布

本文链接：https://blog.csdn.net/qq_61707222/article/details/125642930

版权

//获取图片坐标点
<a href="form_action.php">
<img loading="lazy" src="logo.png" alt="runoob.com" width="336" height="69" ismap>
</a>


<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

适应屏幕的改变:

<area
  shape="poly"
  :coords="onearr"
  alt="map"
  @mouseover="showinfo(1)"
  @mouseout="closeshow"
  href="#"
/>

//script

onMounted(() => {
  window.onresize = () => {
    x1.value = document.body.clientWidth;
    y1.value = document.body.clientHeight;
  };
});
const centermethod = (k) => {
  var res = "";
  k.forEach((item, index) => {
    if (index % 2) {
      item = item * (y1.value / 969);
    } else {
       item = Math.round(item * (x1.value / 1920));
    }
    res += item.toString();
    if (index != k.length - 1) {
       res += ",";
    }
  });
    return res;
};
const onearr = computed(() => {
   return centermethod([482, 178, 546, 192, 492, 407, 415, 390]);
});