Próbuję użyć znaczników <area> i <map>, aby częściom zdjęcia były linkami. Ale nie wiem, jak uczynić mapowany obszar widoczny do kontrolowania, gdzie jest dokładnie (z wyjątkiem oglądania, gdzie kursor staje się wskaźnikiem, ale to zbyt nudne ...)

Jeśli więc użyję poniższego przykładowego kodu, jak mogę wprowadzić wielokąt widoczny na obrazku, aby edytować go skuteczniej?

Próbowałem dodać atrybut class do mapy, a obszar, który ma obramowanie określone w CSS, ale to nie działało: jeśli dodam go do znacznika <map>, jest pokazany poza Obraz (obok prawego dolnego rogu), jeśli dodam go do <area>, nic nie jest wyświetlane.

<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;
  }

Dodatkowa uwaga po otrzymaniu odpowiedzi: Potrzebuję tego, aby edytować obszary łącza, obszary te nie powinny być widoczne przez cały czas, a także nie tylko na unosa. Addon Firefox wspomniany w zaakceptowanej odpowiedzi jest idealny - pokazuje obszary przez cały czas, a nawet pozwala na edycję, dodając dodatkowe węzły wielokątne itp.

8
Johannes 15 luty 2017, 20:47

2 odpowiedzi

Najlepsza odpowiedź

O ile wiem, nie jest to możliwe. Jeśli chcesz pokazać te obszary, musisz dodać absolutne elementy umieszczone, zawierające linki.

W przypadku potrzebny tylko do rozwoju, jest poręczna Rozszerzenie Firefoksa , co może ci pomóc.

Jest oczywiście możliwe wygenerowanie widocznego obszaru za pomocą javascript, prawdopodobnie Ta wtyczka jQuery może Ci pomóc.

2
philipp 15 luty 2017, 19:04

Kliknij dowolne miejsce na obszarze nie-klikalny obraz, a następnie wciśnij przycisk Tabulator na Keybord. Granica konspektu powinna podkreślić wokół każdego kształtu. Dodałem również koordy na morze, może być pomocne w rysowaniu kordami.

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>
3
Paweł 15 luty 2017, 19:28