关于MAP标签中AREA 不能加样式所做的备选方案。（超简单）

最新推荐文章于 2025-04-07 09:40:36 发布

qq_34494077

最新推荐文章于 2025-04-07 09:40:36 发布

阅读量780

点赞数

分类专栏： VUE 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_34494077/article/details/116268195

版权

VUE 专栏收录该内容

1 篇文章

订阅专栏

当遇到AREA标签无法添加样式的问题时，作者提出了一个创新的解决方案，通过在IMG图层上方添加SVG浮层来实现区域高亮。具体做法是在Vue项目中，利用SVG的circle元素模拟AREA的热点，并绑定点击事件。通过监听鼠标移动事件，实现SVG元素跟随鼠标移动，从而达到类似AREA的交互效果，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于MAP标签中AREA 不能加样式所做的备选方案。（超简单）

图层

本人花费了2天时间一直寻找解决AREA标签样式或替代方案。
从GITHUB到各个大小博客搜索，也尝试过MAPLIHIGHT这个库(本人用VUE一直引用报错，放弃)。各种其他人的偏方，曲线加框(复杂)这里就不介绍了

先说下灵感由于MAP标签是针对IMG去做的定位事件等等很方便可惜的是AREA不允许加样式导致加了MAP之后完全看不出这个区域在哪里？用户体验很差！然后想到既然不能再IMG原生上找问题干脆做一个假的来和IMG联动。本人的需求是要使很长的图片移动所以再图片上加浮层使用SVG定位从而达到AREA定位

使用方法

template：

js部分：
return:
movepx:’’, //定义一个用来同步IMG偏移的变量

methods：

		dropImage(e) {
  if (e === null) {
    return;
  }
  this.odiv = e.target; //获取目标元素
  // //算出鼠标相对元素的位置
  let disX = e.clientX - this.odiv.offsetLeft;
  let disY = e.clientY - this.odiv.offsetTop;
  console.log(disX);
  document.onmousemove = (e) => {
    //鼠标按下并移动的事件
    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    let left = e.clientX - disX;
    //   let top = e.clientY - disY;      这里是上下移动  如果需要可以解除注释

    //绑定元素位置到positionX和positionY上面
    //   this.positionX = top;
    this.positionY = left;

    //移动当前元素
    this.odiv.style.left = left + "px";
    this.movepx = left + "px";

  }
},

css:
.cover{
/* width:400px;
height:250px; /
top:0px;
left:0px;
/ background-color:black; /
/ opacity:0; */
position:absolute;
}

以上就是替代 AREA 无法加样式的解决方案