Question

我正在尝试使用<area>和<map>标记将部分图片作为链接。但我不知道如何使映射区域可见以控制它的确切位置（除了观察光标变成指针的位置，但这太繁琐了......）

因此，如果我使用以下示例代码，如何在图像顶部显示多边形以便更有效地编辑它？

我尝试在地图和CSS中定义边框的区域添加class属性，但这不起作用：如果我将其添加到<map>标记，则为显示在图像外部（右下角旁边），如果我将其添加到<area>，则根本不会显示任何内容。

<img src="mypicture.gif" width="300" height="200" usemap="#mymap1">
<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x">
</map>

CSS：

.x {
  border: 1px solid red;
  }

获得答案后的补充说明：我需要它来编辑链接区域，这些区域不应该一直是可见的，而且不仅仅是悬停。在接受的答案中提到的Firefox插件是完美的 - 它一直显示区域，甚至允许编辑，添加额外的多边形节点等。

Answer 1

据我所知，这是不可能的。如果需要显示这些区域，则需要添加包含链接的绝对定位元素。

如果您只需要进行开发，那么有一个方便的firefox extension，它可以帮助您。

当然可以使用javascript生成可见区域，可能this jQuery插件可以帮助你。

Answer 2

单击图片上不可点击区域的任意位置，然后按下键盘上的Tabulator键。轮廓边框应突出显示每个形状。我还添加了鼠标悬挂线，它可以帮助绘制坐标。

＆＃13;

var img = document.getElementById('img');
var coords = document.getElementById('coords');
img.addEventListener('mousemove', function(event){

  coords.innerHTML = "x: " + event.offsetX + "<br/>y: " + event.offsetY;
});

＆＃13;

area {
  outline-color: white;
}

＆＃13;

<img id="img" src="http://lorempixel.com/400/200/sports/" usemap="#mymap1">

<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x" tabindex="0">
  <area shape="circle" coords="220,80,30" href="mylink.html" class="x" tabindex="0">
  <area shape="rect" coords="270,130,330,170" href="mylink.html" class="x" tabindex="0">
</map>

<p id="coords"></p>

＆＃13;

在开发过程中使`<map>`标签中的`<area />`可见

2 个答案: