Introduction
인터넷쇼핑몰, 지도 등에서 하나의 이미지에 여러 링크가 달린 것을 본 적이 있을 것이다.
이처럼 클릭할 수 있는 영역을 가진 이미지를 image-map이라고 한다.
이미지 맵의 태그에는 기본적으로 <img> 태그와 <map>, <area> 태그가 포함되는데 그 중 <map> 태그의 사용법에 대해서 알아보자.
<map> 태그
<map> 태그는 클라이언트 사이드 이미지맵(client-side image-map) 을 정의할 때 사용한다.
<area> 요소는 이러한 이미지맵의 클릭할 수 있는 영역을 정의하는데 사용되며, <map> 요소는 하나 이상의 <area> 요소를 포함할 수 있다.
<map> 요소의 필수 속성인 name 속성은 <img> 요소의 usemap 속성과 결합하여, 이미지(image)와 맵(map) 사이의 관계를 설정한다.
<img src="이미지 경로" usemap="#image-map" />
<map name="image-map">
<area coords="" shape="" href="" target="" title="" alt="" />
...
</map>https://www.image-map.net/
map과 area를 쉽게 지정하기 위해 도움을 주는 사이트이다.
image-map.net 사용법
이미지맵을 사용할 이미지를 등록한다.
- Active: 선택할 좌표
- Shape: 마크 모양 선택
- Link: 마크에 연결될 링크
- Title: 마크에 표시될 타이틀
- Target: 연결돼있는 웹페이지가 열리게 될 방식
(html 태그에 직접 수정가능)
이후 Show Me The Code! 버튼을 누르면 html에 붙여넣을 코드가 팝업으로 열린다.
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://velog.velcdn.com/images/gusto/post/d1ea0026-bd4f-4650-8fda-3f3dd5f2ff2c/image.jpg" usemap="#image-map" />
<map name="image-map">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/1277882/selling" coords="181,175,9" shape="circle">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/1082048/selling" coords="146,289,8" shape="circle">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/195529/selling" coords="121,366,9" shape="circle">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/1342277/selling" coords="334,366,9" shape="circle">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/743099/selling" coords="471,210,10" shape="circle">
<area target="_blank" alt="" title="" href="https://ohou.se/productions/917635/selling" coords="509,264,9" shape="circle">
</map>결론
하나의 이미지로 여러 가지 정보를 한눈에 볼 수 있게 한다는 것이 새롭고 편리하다고 느꼈다.
하지만 image-map.net 처럼 이미지맵을 편리하게 사용할 수 있는 툴이 없다면 내가 직접 만드는 데 한계가 있다고 생각되었고, 다른 방식을 찾아볼 필요성 또한 느꼈다.
이미지 출처: https://ohou.se/cards/17145639
느리지만 천천히.