JavaScript로 area 영역 href 속성의 해시(hash) 부분을 가져오는 방법

<area> 요소의 href 속성 값 중 해시(hash) 부분, 즉 URL에서 # 기호 뒤에 오는 문자열을 확인하려면 JavaScript의 hash 속성을 사용하면 됩니다.

hash 속성은 지정된 링크 주소에 앵커(예: #name)가 포함되어 있을 경우 해당 부분을 그대로 반환합니다. 만약 해시가 존재하지 않으면 빈 문자열이 반환됩니다.

아래 예제 코드를 직접 실행해 보면 about.htm#name이라는 링크 주소에서 해시 부분인 #name이 출력되는 것을 확인할 수 있습니다.

예제 코드

<!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#name" alt = "Team" target = "_self" >
      </map>
      <script>
         var x = document.getElementById("myarea").hash;
         document.write("<br>Hash: "+x);
      </script>
   </body>
</html>

코드 설명

usemap: 이미지를 이미지맵으로 지정하여 클릭 가능한 영역을 정의합니다.
<area>: 이미지 위에 원형(circle) 형태의 클릭 영역을 만들고, href 속성으로 이동할 주소와 해시(#name)를 지정합니다.
hash 속성: document.getElementById("myarea").hash를 통해 해당 area의 href 값에서 # 이후의 해시 문자열을 추출합니다.

이처럼 hash 속성을 활용하면 페이지 내 특정 위치로 이동하는 앵커 정보를 손쉽게 읽어와 동적인 처리에 활용할 수 있습니다.