Image maps : MAP, AREA
 


이미지맵이란, 그림이나 오브젝트의 일부분을 사용자가 마우스로 클릭하면 어떤 반응을 보이도록 만든 것으로, server-side map과 client-side map의 두 가지 종류가 있다. Server-side map은 일반 사용자가 만들기도 어렵고, 매번 서버와 통신을 해야 하는 번거로움이 있어, 대부분은 client-side map을 만든다.


Client-side map : 사용자가 이미지맵의 일부분을 마우스로 클릭하면, 웹 브라우저가 해당 부분의 픽셀 좌표를 인식하고, AREA element의 href 속성에 정의된 경로를 따라 화면을 이동한다.
Server-side map : 사용자가 이미지맵의 일부분을 마우스로 클릭하면, 해당 부분의 픽셀 좌표가 서버에 있는 프로그램으로 넘어가 뭔가 반응한다.



이미지맵 만들기

이미지맵의 예를 하나 보기로 하자. 이미지맵의 좌표를 직접 잡기는 번거로우므로, 여기서는 Coffeecup Image Mapper(다운로드)라는 프로그램을 이용하였다.

오라클 자격증 강좌 자바스크립트 기초

t_inside1.gif

위 예에 대한 소스는 다음과 같다:

<MAP NAME="map">
<AREA SHAPE=rect COORDS="15,33,104,45" ALT="오라클 자격증 강좌" href="http://www.yajava.com/shop/mart5/pds.php3">
<AREA SHAPE=rect COORDS="15,18,101,30" ALT="자바스크립트 기초" href="http://www.yajava.com/shop/mart5/bbs.php3?table=script">
<AREA SHAPE=rect COORDS="0,0,119,56">
</MAP>
<IMG SRC="/images/t_inside1.gif" WIDTH=119 HEIGHT=56 BORDER=0 ALT="t_inside1.gif" USEMAP="#map">

Coffeecup Image Mapper와 관련된 설명은 다음과 같다:

Coffeecup Image Mapper를 실행하고, [File]-[Map Wizard] 메뉴를 선택한다. Create a new map을 선택하고 Next를 누른다.


Browse 단추를 눌러 이미지맵으로 사용할 그림 파일을 선택한다. 파일의 이름이 기본적으로 맵 이름으로 들어간다. 수정해도 된다. Next를 누른다.


Finish를 누른다.


사각형, 원형, 다각형 중에서 하나를 선택하고, 마우스로 영역을 지정한다. 시작점을 클릭하고, 끝점을 클릭하면 된다.
이어서 나오는 대화상자에 적당한 값을 넣는다. URL에는 해당 영역을 클릭했을 때 이동할 문서의 상대경로나 절대경로를 적는다. Onmouseover text는 해당 영역에 마우스를 가져갔을 때 브라우저의 상태표시줄에 나타나게 될 문자열을 적는다. Alt는 IMG의 alt 속성과 같은 뜻이다. 브라우저에 따라 툴팁으로 나오기도 한다.

<MAP NAME="map">
<AREA SHAPE=rect COORDS="15,33,104,45" ALT="오라클 자격증 강좌" href="http://www.yajava.com/shop/mart5/pds.php3" OnMouseOver="window.status=";return true">
<AREA SHAPE=rect COORDS="15,18,101,30" ALT="자바스크립트 기초" href="http://www.yajava.com/shop/mart5/bbs.php3?table=script">
<AREA SHAPE=rect COORDS="0,0,119,56" OnMouseOver="window.status=";return true">
</MAP>
<IMG SRC="/images/t_inside1.gif" WIDTH=119 HEIGHT=56 BORDER=0 ALT="t_inside1.gif" USEMAP="#map">

영역을 지정할 때 마다 위와 같은 코드가 생성된다. 이 코드를 복사해서 HTML 문서 안에 붙여넣으면 된다. 코드를 붙여 넣은 후에는 필요없는 부분은 지우고, 첨가할 부분은 첨가해서 사용한다. 위의 이미지맵 예에서는 alt와 onmouseover 속성을 지우고, title 속성을 추가하였다. IMG element 안에 usemap 속성이 들어감을 유심히 보자. Usemap 속성의 값은 이미지맵의 이름을 그대로 써주되, 이름 앞에 # 표시를 붙인다. IMG 안에 border=0 이 들어간 것도 잘 살펴보자. 이미지맵도 일종의 링크이기 때문에 전체 그림에 테두리선이 생기게 된다. Border=0 속성을 IMG 안에 넣어주면 이 테두리선이 생기지 않는다.

MAP element

이미지맵의 시작과 끝을 알리는 element로 시작과 끝내는 태그로 이루어진다.
사용할 수 있는 속성은 다음과 같다:

속성
+ name

name = 문자열

이미지맵의 이름이다. 임의로 주면 된다.

AREA element

이미지맵 안에 있는 영역의 수만큼 들어가는 element로 시작 태그만 있다.