HTML 이미지 맵 만들기(usemap)

<img> 태그에 있는 usemap 속성을 이용하면 하나의 사진에 구역을 나눠 서로 다른 사이트로 향하는 링크를 만들 수 있습니다.

ex)

<img src="사진.png" alt="" usemap="#네임이름">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

</map>

실제로 해보겠습니다.

(유즈맵 적용 전 사진)

(유즈맵 적용 후 사진)

이미지맵을 적용하기 전 사진에서는 마우스를 사진에 올렸을 때 마우스 포인터에 아무런 변화가 없지만

이미지맵을 적용한 후 사진에는 사진박스, 네이버박스, 다음박스에 마우스를 올렸을 때 포인터가 변하는걸 볼 수 있으며

클릭시 해당 사이트로 이동하는 것을 볼 수 있다.

적용 소스

<img src="https://t1.daumcdn.net/cfile/tistory/2451BA4C596D6FFE1B" alt="" usemap="#named">

<map name="named">

<area shape="rect" coords="22,19,225,209" href="http://wishml.tistory.com/1">

<area shape="rect" coords="255,80,435,135" href="http://wishml.tistory.com/2">

<area shape="rect" coords="255,160,435,208" href="http://wishml.tistory.com/4">

</map>