라벨이 이미지 맵인 게시물 표시

[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%2Fkurl