html imgage map

HTML - IMG MAP 사용방법 정리

IMG MAP이란?
특정 이미지 안에 특정 부위를 선택하여 웹상에 링크를 걸수 있도록 할 수 있는 HTML 태그입니다.


IMG MAP 사용 형식

html 이미지 소스
<img src="img_sample.gif" width="538" height="445" alt="" usemap="#sample">

· 이미지 img_sample.gif(538*445) gif 이미지에 이미지맵(usemap="#sample") 연동작업을 위해 usemap를 사용합니다.


IMG MAP 기본폼(참고 :html 구문 어디에 적어도 상관없습니다.)
<map name="sample"> --> img map 시작

<area shape="rect" coords="190,0,449,88" href="#" alt="버튼1입니다.">

</map>--> img map 끝

· name : <img>의 usermap에서 지정한 맵 이름과 동일해야 합니다.

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

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

· href : 클릭시 이동할 URL을 지정합니다.

· alt : 이미지맵 영역에 마우스를 가져다 댈 경우 나타는 글자 부분입니다.

 

출처 : http://pbvk.tistory.com/42