JavaScript에서 이미지의 usemap 속성 값을 가져오려면 useMap 프로퍼티를 사용하면 됩니다.
usemap 속성은 클라이언트 측 이미지 맵(client-side image map)을 활성화하는 역할을 합니다. <img /> 태그에 usemap 속성을 지정하고, <map> 태그와 <area> 태그를 사용해 클릭 가능한 영역을 정의합니다. 맵으로 사용할 이미지는 평소처럼 <img /> 요소로 페이지에 삽입하면 되며, 이때 usemap이라는 추가 속성만 함께 지정해 주면 됩니다.
예제
다음 예제 코드를 실행하면 이미지의 usemap 속성 값을 화면에 출력할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<img id="myid" src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
<map name = "html">
<area id="myarea" shape = "circle" coords = "154,150,59" href = "about.htm?id=company" alt = "Team" target = "_self" >
</map>
<script>
var myVal = document.getElementById("myid").useMap;
document.write("<br>Usemap 값: "+myVal);
</script>
</body>
</html>
코드 설명
위 예제에서는 document.getElementById("myid")를 사용해 id가 myid인 이미지 요소를 선택한 뒤, .useMap 프로퍼티를 통해 해당 이미지의 usemap 속성 값을 읽어옵니다.
실행 결과
#html
출력 결과에서 알 수 있듯이, usemap 속성에 지정된 맵 이름이 # 기호를 포함한 채 그대로 반환됩니다. 이 값을 활용하면 JavaScript에서 이미지 맵의 연결 상태를 동적으로 확인하거나 변경할 수 있습니다.