개발 중에 '<map>'태그의 '<area>'을 볼 수 있습니다.

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

추가 발언은 : 나는 그것이 링크 영역을 편집 할 필요, 그 영역은 호버에서뿐만 아니라 모든 시간을 볼 수 및 안된다. 수용된 대답에 언급 된 파이어 폭스 애드온은 완벽합니다. 항상 영역을 표시하고 추가 폴리곤 노드 등을 추가 할 수 있습니다.

Answer 1

내가 아는 한, 이것은 불가능합니다. 해당 영역을 표시해야하는 경우 링크가 포함 된 절대 위치 요소를 추가해야합니다.

개발에만 필요하면 도움을 줄 수있는 편리한 firefox extension이 있습니다.

자바 스크립트를 사용하여 가시 영역을 생성하는 것이 가능합니다. 아마도 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>