[HTML] map, area 태그, usemap 속성 - 이미지 맵 지정하기

이미지를 클릭하면 특정 url 주소로 이동하도록 할 수 있다.

그런데 한 이미지를 가지고 클릭 위치에 따라 서로다른 url 주소로 이동하게도 할 수 있다.

이것을 이미지 맵 이라고 한다.

이미지 맵은 이미지에 영역을 만든 후 링크를 추가해야한다.

사용법은 아래와 같다.

<map name="맵이름">

<area>

<area>

...

....

</map>

<img src="이미지 파일" usemap="#맵이름" alt="이미지설명">

usemap 속성에 #을 붙여야 하며 map 태그의 name 속성과 이름을 동일하게 작성해야 한다.

실제 사용 예제를 보면

<map name="kurly">

<area

shape="rect"

coords="0,0,100,100"

href="https://www.naver.com"

alt="네이버"

/>

</map>

<a

href="https://www.kurly.com/shop/event/kurlyEvent.php?htmid=event%2Fjoin%2Fjoin_201223&%243p=a_custom_741527000799871056&%24deeplink_path=home&%24android_passive_deepview=false&%24ios_passive_deepview=false&%24fallback_url=https%3A%2F%2Fwww.kurly.com%2Fshop%2Fevent%2FkurlyEvent.php%3Fhtmid%3Devent%2Fjoin%2Fjoin_201223&~tags=3004&~stage=2101&~campaign=49029&~keyword=non_time_011103&utm_source=3004&utm_medium=2101&utm_campaign=49029&utm_content=non_time_011103&_branch_match_id=868916323329117384"

target="_blank"

>

<img

usemap="#kurly"

width="1000px"

height="500px"

src="https://ssl.pstatic.net/tveta/libs/1320/1320163/f8024c36be489cc02980_20201224144537933_8.jpg"

alt="마켓컬리사진"

/>

</a>

map 태그안에 area 태그를 작성하고 속성을 사용하여 이미지의 특정 좌표, 링크주소, 선택시 모양 등을 설정할 수 있다.

그리고 img 태그에 usemap 속성을 사용하여 위에 map 태그로 작성한 내용이 연결되도록 이미지 맵을 지정한다.

이미지 맵을 설정하게 될 경우 탭으로 해당부분을 선택할 수 있게 된다.

나의 경우 네모부분을 클릭하면 네이버로 이동하도록 만들었고

나머지 부분을 클릭하며 마켓컬리로 이동하도록 작성했다.