我试图使用<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插件是完美的 - 它一直显示区域,甚至允许编辑,添加额外的多边形节点等。
据我所知,这是不可能的。如果需要显示这些区域,则需要添加包含链接的绝对定位元素。
如果你只需要开发,有一个方便的firefox extension,它可以帮助你。
当然可以使用javascript生成可见区域,可能this jQuery插件可以帮助你。
单击图片上不可点击区域的任意位置,然后只需按下键盘上的Tabulator
键即可。轮廓边框应突出显示每个形状。我还添加了mouseover coords,它可以帮助绘制coords。
var img = document.getElementById('img');
var coords = document.getElementById('coords');
img.addEventListener('mousemove', function(event){
coords.innerHTML = "x: " + event.offsetX + "<br/>y: " + event.offsetY;
});
area {
outline-color: white;
}
<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>