`` <area> `` в теге `<map>`, который отображается во время разработки

Question

Я пытаюсь использовать теги <area> и <map>, чтобы сделать части изображений ссылками. Но я не знаю, как сделать отображаемую область видимой для контроля там, где она точно (кроме того, где курсор становится указателем, но это слишком утомительно ...)

Итак, если я использую следующий пример кода, как сделать многоугольник видимым поверх изображения, чтобы более эффективно его редактировать?

Я попытался добавить атрибут class как к карте, так и к области с границей, определенной в 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, упомянутый в принятом ответе, является идеальным - он постоянно показывает области и даже позволяет редактировать, добавляя дополнительные многоугольные узлы и т. Д.

Answer 1

Насколько мне известно, это невозможно. Если вам нужно показать эти области, вам нужно добавить абсолютные позиционированные элементы, содержащие ссылки.

Если вам это нужно только для разработки, есть удобный firefox extension, который может вам помочь.

Конечно, можно создать видимую область, используя javascript, возможно this Плагин jQuery может вам помочь.

Answer 2

Нажмите на любую область изображения без щелчка, а затем просто нажмите на Tabulator ключ на вашем ключевом слове. Граница контура должна выделяться вокруг каждой фигуры. Я также добавил мышиные коорды, может быть полезно нарисовать коорды.

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>