[HTML] 이미지맵 사용법

HTML로 구현하기 어려운 그림이 있었는데 구글링을 하다가 이미지맵이란 기능을 발견하여 요긴하게 써먹었다.

 

이미지맵이란 HTML상으로 이미지를 넣고 그 이미지의 특정 구역의 좌표를 따서 그 구역에 링크를 걸어주는 방법이다. 

 

사용방법

 

<img src = "/dir/example.jpg" alt ="Test" usemap = "#map" />
<map id="map">
    <area shape="rect" coords="좌표" href="example.html" target="_self">
    <!--모양은 rect(사각형) , circle(원형) , poly(다각형) 등을 취할 수 있다.-->
</map>

 

좌표는 포토샵이나 각종 툴로 딸 수 있다. 그러나 이미지 좌표를 따주는 사이트가 있어서 그 사이트를 이용하는것이 더 편하다

 

해당 좌표 따주는 사이트 링크를 걸어놓겠당

 

링크 : maschek.hu/imagemap/imgmap/