이미지 맵의 영역 강조 표시

Question

다음 사이트 (http://www.html-map.com/)를 사용하여 내 사이트에서 사용할 이미지 맵을 만들었습니다. 현재 사용자가 대륙을 가리키면 특정 페이지에 대한 링크가 표시되지만 대륙이 링크임을 나타내는 시각적 신호는 없습니다. 이상적으로 대륙 상단에 어떤 종류의 아이콘이 겹쳐져 색이 바뀌거나 대륙 자체가 강조 표시됩니다.

후자는 IE8에서 지원되지 않는 SVG가 필요하기 때문에 나는 완전히 잘못된 방식으로 접근하고 있다고 생각하지만 이전 버전을 선택했습니다.

현재 절대 위치 지정을 사용하여 이미지의 맨 위에 아이콘을 중첩하고 있지만 이는 링크가 아이콘에 있어야하므로 처음부터 내 이미지를 매핑하는 전체 프로세스가 낭비되었다는 것을 의미합니다. 이미지 맵 안에 있지 않습니다.

제 질문은 링크 비헤이비어를 유지하면서 각 대륙의 아이콘을 오버레이하기 위해 이미 정의한 매핑 된 영역을 어떻게 사용할 수 있습니까?

영역 태그 내에 스팬을 삽입하려고 시도했지만 전혀 작동하지 않습니다. 어떤 도움이나 대안적인 접근법도 크게 감사 할 것입니다.

HTML

<div class="worldMap"> 
    <img src="http://s30.postimg.org/8bqsljpvl/worldmap.png" alt="" usemap="#map1400147861975"> 
    <map id="map1400147861975" name="map1400147861975"> 
    <area shape="rect" coords="109.99999559765627,10.999995597656266,159.46666159765627,34.46666159765627" title="Europe" alt="Europe" href="#Europe" target="_self"> 
    <area shape="rect" coords="110.99999559765627,40.999995597656266,147.46666159765627,91.46666159765627" title="Africa" alt="Africa" href="#Africa" target="_self"> 
    <area shape="rect" coords="63,56,96,103" title="South America" alt="South America" href="#SouthAmerica" target="_self"> 
    <area shape="rect" coords="25,29,73,42" title="North America" alt="North America" href="#NorthAmerica" target="_self"> 
    <area shape="rect" coords="25.999995597656266,41.999995597656266,83.46666159765627,55.46666159765627" title="Central America" alt="Central America" href="#CentralAmerica" target="_self"> 
    <area shape="rect" coords="159.99999559765627,10.999995597656266,251.46666159765627,64.46666159765627" title="Asia" alt="Asia" href="#Asia" target="_self"> 
    <area shape="rect" coords="190.99999559765627,66.99999559765627,245.46666159765627,101.46666159765627" title="Austrilasia" alt="Austrilasia" href="#Austrilasia" target="_self"> 
    </map> 
    <span class="glyphicon glyphicon-briefcase europe"></span> 
</div> 

내가 여기에 바이올린을 만든

.europe{ 
    position: absolute; 
    left: 125px; 
    top: 22px; 
    color: blue; 
} 

worldMap{ 
    position: relative; 
} 

CSS : 이 http://jsfiddle.net/jezzipin/z6UnR/2/

Answer 1

내 생각에 난 모든 공중 선회 영역 (6 개) 새로운 이미지를 creat에있다. 당신은 호버 한 지역의 명백한 색깔을 바꾸어야한다.

그런 다음 javascript를로드하면 항상 올바른 영역에 적합한 이미지가로드됩니다. 한 번 그런 프로젝트가 있었지만 여전히 검색 중입니다.

내게주세요.

PS : alternativ 매핑 프로그램으로, "빠른 이미지 맵"