JavaScript에서 <area> 요소의 href 속성 값 중 경로명(pathname) 부분을 가져오려면 pathname 속성을 사용하면 됩니다. pathname 속성은 링크 URL 전체가 아닌, 도메인 주소 뒤에 오는 경로 부분만 문자열로 반환합니다.
예제
다음 코드를 실행하면 이미지 맵(map) 안에 정의된 area 요소의 href 속성에서 경로명 부분을 읽어와 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<img 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" target = "_self" >
</map>
<script>
var x = document.getElementById("myarea").pathname;
document.write("<br>Pathname: "+x);
</script>
</body>
</html>
코드 설명
<area> 태그에는 id로 "myarea"가 지정되어 있으며, href 속성값으로 "about.htm"이 설정되어 있습니다. 스크립트 부분에서 document.getElementById("myarea")로 해당 요소를 선택한 뒤 .pathname 속성을 참조하면 경로명 부분이 변수 x에 저장됩니다.
마지막으로 document.write()를 이용해 결과를 화면에 출력하며, 실행 결과는 대략 다음과 같이 나타납니다.
Pathname: /about.htm
이처럼 pathname 속성을 활용하면 이미지 맵의 각 영역(area)이 어떤 페이지로 연결되는지 경로 정보를 손쉽게 확인할 수 있습니다.