이미지맵(image map), <area>태그

 

이미지맵(image map)

·       하나의 이미지에 이미지의 일부분을 클릭할 수 있도록 여러 개의 링크를 생성할 수 있습니다.

·       이미지맵을 사용하면 HTML 소스를 보다 간결하게 만들 수 있습니다.

 

 

 

<area>태그

이미지에 하이퍼링크 영역을 지정하기 위해서 <area>태그를 사용합니다

속성	설명
shape	·       이미지맵의 형태를 지정 (링크가 걸리는 모양)합니다. 속성값 설명 rect 사각형 circle 원형 poly 다각형
coords	·       좌표값을 지정합니다. ·       이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분의 좌표값을 지정합니다.

 

 

 

 

<img>태그의 usemap 속성을 <map>태그의 id속성의 값으로 지정하면 이미지와 맵사이의 관계가 설정되어 집니다.

<img src="the-avengers-collection.jpg" alt="imgmap.gif" usemap="#imgmap2015121231739" border="0">

 

<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 링크를 가진 버튼역할을 하게 됩니다.

<map id="imgmap2015121231739" name="imgmap2015121231739"> <area shape="rect" alt="" title="" coords="375,748,523,888" href="http://marvel.com/characters/23/hawkeye" target="" /> <area shape="rect" alt="" title="" coords="1411,741,1553,887" href="http://marvel.com/characters/6/black_widow" target="" /> <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --> </map>