gpt4 book ai didi

html - 在开发过程中使 标签中的 可见

转载 作者:太空狗 更新时间:2023-10-29 15:59:12 27 4
gpt4 key购买 nike

我正在尝试使用 <area><map>使图像的部分 表现为链接的标签。但是我不知道如何使映射区域可见以控制它的确切位置(除了看光标在哪里变成指针,但那太乏味了......)

因此,如果我使用以下示例代码,我怎样才能使多边形在图像顶部可见(无需聚焦或悬停)以便更有效地对其进行编辑?

我试图添加一个 class属性到 map 和具有在 CSS 中定义的边界的区域,但这不起作用:如果我将它添加到 <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 插件是完美的 - 它始终显示区域,甚至允许编辑、添加额外的多边形节点等。

最佳答案

单击图片不可单击区域的任意位置,然后只需按键盘上的 Tab 键即可。轮廓边框应突出显示在每个形状周围。我还添加了鼠标悬停坐标,它可以帮助绘制坐标。

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>

关于html - 在开发过程中使 <map> 标签中的 <area> 可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42256610/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com