[HTML 기초 강좌] 10. img map 태그

1. img map 태그

 

img map(이미지 맵) 기능은 하나의 이미지에 여러가지 모양의 영역을 구성하고 이 모양에 링크를 설정하는 기능을 말한다.

즉, 하나의 이미지에 여러개의 링크를 설정할 수 있다는 말이다.

 

개인적으로 홈페이지를 만드는 동안에는 사용해 본적도 없고 굳이 사용할 필요도 없는 기능 같다.

홈페이지를 만들 때 링크가 나눠지면 버튼을 나눠서 만들면 된다.

이미지의 좌표를 가지고 링크를 설정한다는 것은 효율적이지도 못하다.

반응형 웹이 대세인 요즘에 이미지의 크기는 변하고 그 변하는 이미지의 좌표도 변하기 때문에 더더욱이 사용할 일은 적어지지 않을까 생각된다.

 

하지만 이 기능이 사용 될 곳이 분명히 존재 할 것이며 그것을 대비해서 포스팅한다.

거의 쓸일이 없기 때문에 자세한 좌표 구하는 식이나 좌표의 설정 방법에 대해선 설명하지 않는다.

 

형식은 다음과 같다.

<img scr="이미지파일명" usemap="#map이름">
<map name="map이름">
     <area shape="영역의 모양이름" coords="영역의 좌표들"

href="문서명 또는 url주소"  target="target값">

</map>

 

속성들은 다음과 같다.

name : <img>의 usermap에서 지정한 맵 이름과 같아야 한다.

shape : 이미지맵의 모양을 시각형(rect), 타원형(circle), 다각형(poly) 중에 지정한다.

coords : shape에서 선택한 이미지맵에 따라 좌표 부분이 달라진다. 다각형(poly)의 경우 최소3개의 꼭지점이 필요하다.

href : 클릭시 이동할 URL을 설정한다.

alt : 이미지맵 영역에 마우스를 가져다 댈 경우 나타는 글자를 설정한다.

 

ex) 이미지맵.html