이미지맵 image map 확인

이미지맵이 걸려있는 경우 영역을 확인하기 힘들때가 있다. 또는 해당 영역을 스타일을 주고 싶을때도 있다.

이런 경우 확인 하는 방법이 있다.

출처 : http://davidlynch.org/projects/maphilight/docs/demo_simple.html

 

방법

<img src="map.jpg" alt="이미지맵" border="0" class="map" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="rect" coords="11,789,192,807" href="link1.htm" target="_blank" data-maphilight='{"strokeColor":"0000ff","strokeWidth":1,"fillColor":"ff0000","fillOpacity":0.6}' />
 <area shape="rect" coords="11,814,266,831" href="link2.htm" target="_blank" data-maphilight='{"strokeColor":"0000ff","strokeWidth":1,"fillColor":"ff0000","fillOpacity":0.6}' />
</map>

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<script type="text/javascript">$(function() {
 $('.map').maphilight();
});</script>

이렇게 하면 mouse over 시 maphilight 에 있는 스타일이 영역에 적용되어 보인다.

 

jquery.maphilight.js