이미지맵 태그

<img src="이미지파일.jpg" usemap="#maptag">

<map name="maptag">

<area shape="rect" coords="x1,y1,x2,y2" href="이동할 주소" title="미리보기문구">

</map>

이미지맵 태그 사용법

1. <img src="이미지파일.jpg" usemap="#maptag">

불러올 이미지의 파일명(경로)를 지정해준 뒤 빨간 글씨처럼 맵태그에 사용될 이름을 지정 (임의로 지정 가능)

2. <map name="maptag">

이미지맵 태그에 쓸 이름을 입력 (빨간글씨로 쓴 부분에서 # 이후 부분과 똑같이 입력)

3. <area shape="rect" coords="x1,y1,x2,y2" href="이동할 주소" title="미리보기문구">

'area shape'는 효과를 줄 영역의 형태를 지정해준다.

(rect=사각형, circle=원형, poly=다각형, default=전체)

'coords'는 이미지 내에서 효과를 줄 부분의 영역을 지정해준다.

(사각형일 경우 x1,y1은 좌측 상단 꼭지점의 좌표. x2,y2는 우측 하단 꼭지점 좌표. 원형일 경우 중심점 좌표 하나 x1,y1과 반지름 r을 써준다.(예 : coords="x1,y1,r") 다각형일 경우 각 꼭지점의 좌표(x축,y축)를 써준다.)

'href'는 지정해준 영역을 클릭했을때 이동해야 할 곳을 지정해준다.

'title'는 해당 영역에 마우스를 오버시켰을때 나타날 안내문구를 지정해준다.

하나의 이미지에 여러개의 영역을 지정해줄 경우

<area shape="rect" coords="x1,y1,x2,y2" href="이동할 주소" title="미리보기문구">

이 부분을 반복입력한다.

예시