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

<IMG src = "../image/map.gif" border = 0 usemap = "#map">
<MAP name = "map">
  <AREA shape = rect coords = "19,39,136,59" href = "family.html"   title = "우리 가족">
  <AREA shape = rect coords = "19,79,135,98" href = "hobbies.html"  title = "나의 취미">
  <AREA shape = rect coords = "18,118,135,136" href = "whatido.html"  title = "내가 하는 일">
  <AREA shape = rect coords = "18,156,137,177" href = "favorite.html"  title = "좋아하는 것">
  <AREA shape = rect coords = "19,194,135,214" href = "freinds.html"  title = "친구들">
</MAP>

	Coffeecup Image Mapper를 실행하고, [File]-[Map Wizard] 메뉴를 선택한다. Create a new map을 선택하고 Next를 누른다.
	Browse 단추를 눌러 이미지맵으로 사용할 그림 파일을 선택한다. 파일의 이름이 기본적으로 맵 이름으로 들어간다. 수정해도 된다. Next를 누른다.
	Finish를 누른다.
	사각형, 원형, 다각형 중에서 하나를 선택하고, 마우스로 영역을 지정한다. 시작점을 클릭하고, 끝점을 클릭하면 된다.
	이어서 나오는 대화상자에 적당한 값을 넣는다. URL에는 해당 영역을 클릭했을 때 이동할 문서의 상대경로나 절대경로를 적는다. Onmouseover text는 해당 영역에 마우스를 가져갔을 때 브라우저의 상태표시줄에 나타나게 될 문자열을 적는다. Alt는 IMG의 alt 속성과 같은 뜻이다. 브라우저에 따라 툴팁으로 나오기도 한다.

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

MAP element

속성

name

AREA element

속성

shape, coords, nohref

href, alt, target, tabindex, accesskey

id, class, title, style

onclick, ondlclick, onmouseup, onmousedown, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

coords = "좌표값"

nohref