CLIENT-SIDE IMAGE MAP

<MAP NAME="map_name">
<AREA SHAPE="shape" COORDS="pixel coordinates" HREF="URL">
</MAP>

<IMG SRC="image.gif" USEMAP="[filename.html]#map_name" [ISMAP]>

Client-Side Image Map은 Server-Side Image Map에 대하여 몇가지 장점이 있다. 우선 Server-Side Image Map에 비하여 구현하기가 쉬우며, 서버와의 대화량을 줄여서 속도를 향상시킨다. 또한 브라우저에서 Image Map애 의하여 연결되는 URL을 알 수가 있으므로 보다 많은 정보를 사용자는 얻게 된다.

Image Map을 사용하기 위해서는 우선 <MAP> tag과 <AREA> tag을 사용하여 Map을 정의 하여야 한다. 한 영역에 대한 링크는 AREA를 사용하여 다음과 같이 지정한다.

<AREA SHAPE=CIRCLE COORDS = "center-x,center-y,radius-x" HREF = "URL">
중심(center) 좌표와 반지름(radius)을 이용하여 원(circle) 영역을 지정
<AREA SHAPE=POLYGON COORDS = "x1,y1,x2,y2,x3,y3,..." HREF = "URL">
(x,y)좌표들로 이루어진 임의의 다각형 영역을 지정
<AREA SHAPE=RECT COORDS = "left-x,top-y,right-x,bottom-y" HREF = "URL">
왼쪽 상단 좌표와 우측 하단 좌표를 이용하여 직사각형 영역을 지정
좌표의 위치를 알기 위해서는 좌표를 보여주는 여러 그래픽 툴들을 사용하면 된다. Map이 지정된 이후에는 <IMG> tag에서 사용할 수 있다. 사용하고자 하는 Map을 USEMAP attribute로 지정한다. 다른 문서에서 지정된 Map을 사용하는 경우에는 virtual path로 지정할 수 있다.

사용예

[mapdef.html]
<MAP NAME="demobar"> 
<AREA SHAPE="RECT" COORDS= "24,18,143,41" HREF="smartmap/previous.html">
<AREA SHAPE="RECT" COORDS= "168,18,287,41" HREF="smartmap/next.html"> 
</MAP>
[소스 파일]
<IMG SRC="image.gif" USEMAP="mapdef.html#demobar">

포개진 영역의 우선 순위

먼저 정의된 영역(area)의 URL이 우선된다. 
<MAP NAME="overlap"> 
<AREA SHAPE="RECT" COORDS="66,13,186,37"  HREF="smartmap/green.html"> 
<AREA SHAPE="RECT" COORDS="195,23,245,46"  HREF="smartmap/blue.html"> 
</MAP> 
<IMG SRC="overlap.gif" USEMAP="#overlap">

Cliet-Side Image Map과 Server-Side Image Map을 동시에 지원

Client-Side Image Map을 지원하지 않는 브라우저를 위하여 <IMG> tag에 ISMAP attribute를 넣음으로써 Server-Side Image Map을 동시에 지원할 수 있다.

[사용예] 

<A HREF="http://www.spyglass.com/cgi-bin/imagemap/maps/cs/test.map"> 
<IMG SRC="test.gif" USEMAP="#test" ISMAP>
</A>

<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="23,18,144,42" HREF="smartmap/test.html">
</MAP>

참고한 페이지들

Client-Side Image Mapping Tutorial
http://www.spyglass.com/techspec/img_maps.html