HTML 이미지 매핑

Question

이미지 맵에 일종의 투명 상자를 포함시킬 수 있습니까? 사람들이 안에 마우스를 가져 가면 안에 내용이 들어있는 상자가 나타납니다.

나는 이것을 일찍 생각했지만 어떻게해야할지 확신하지 못했습니다.

Answer 1

나는 그것이 확실히 가능하다고 말하고 싶습니다. 아마도 일부 jQuery를 사용하여 어떤지도 요소를 가져 와서 어떤 종류의 범위를 표시하려고 시도 할 것입니다.

id를 특정 영역으로 설정하고 마우스를 원하는 배경으로 설정할 수도 있습니다. (이것을 시도하지 않고, 단지 생각)

Answer 2

다음은 간단한 예입니다. 이렇게하면 상자가 강조 표시되므로 CSS를 편집하여 숨기거나 표시/배치 할 수 있습니다. HTML5 "data-"요소를 사용하여 이벤트 핸들러에서 해당 요소를 식별하는 데 사용되는 데이터를 저장했습니다.

<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0"> 

<map id="map1" name="demo"> 
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" /> 
</map> 

<div id="a">Info goes here</div> 

CSS :

.active { 
    border:2px solid #ff0000 
} 

JS :

$('#map1 area').on('mouseover',function() { 
    var target = $(this).data('element'); 
    $("#" + target).addClass('active'); 
}) 
$('#map1 area').on('mouseout',function() { 
    var target = $(this).data('element'); 
    $("#" + target).removeClass('active'); 
})