HTML에서는 <img> 태그의 usemap 속성을 사용하여 이미지를 클라이언트 측 이미지 맵(client-side image map)으로 지정할 수 있습니다. 이미지 맵은 하나의 이미지 내부에 클릭 가능한 영역을 여러 개 정의하고, 각 영역을 서로 다른 링크와 연결할 수 있는 기능입니다.
usemap 속성 사용 방법
usemap 속성에는 연결하려는 <map> 요소의 name 속성 값 앞에 #(해시 기호)를 붙여 지정합니다. 그런 다음 <map> 태그 안에 <area> 요소를 배치하여 클릭 가능한 영역의 모양(shape), 좌표(coords), 이동할 링크(href) 등을 정의합니다.
예제
<!DOCTYPE html> <html> <head> <title>HTML map Tag</title> </head> <body> <img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/> <!-- Create Mappings --> <map name = "html"> <area shape = "circle" coords = "154,150,59" href = "about/about_team.htm" alt = "Team" target = "_self" /> </map> </body> </html>
코드 설명
위 예제에서 <img> 태그는 usemap="#html" 속성을 통해 이름이 "html"인 이미지 맵과 연결됩니다. <area> 요소는 shape="circle"로 원형 영역을 정의하며, coords="154,150,59"는 중심 좌표가 (154, 150)이고 반지름이 59픽셀인 원을 의미합니다. 사용자가 해당 영역을 클릭하면 href에 지정된 페이지로 이동하게 됩니다.