이미지맵은 하나의 이미지에 여러개의 링크를 걸때 사용합니다.

이미지맵을 사용하면 HTML 소스가 간단해 지는 장점이 있습니다.

<img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0"> <map name="001">  <area shape="rect" coords="42,41,154,66" href="/01/homepage.php" target="_blank">  <area shape="rect" coords="42,76,152,100" href="/03/html.php" target="_blank">  <area shape="rect" coords="40,113,150,138" href="/05/html2.php" target="_blank"> </map>

먼저 이미지맵을 적용할 이미지에 usemap 속성을 사용하여 이미지맵의 이름을 지정해 주어야 합니다.

<img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0">

001이라는 이름을 가진 이미지맵을 사용하겠다는 의미이니다. 이때 #을 사용함에 주의를 기울여야 합니다.

그리고 나서는 <map>태그를 사용하여 이미지맵을 만듭니다.

<map name="001"> ... </map>

이미지맵에서 하이퍼링크의 영역을 지정하기 위해서 <area>태그를 사용합니다.

<area>태그의 shape속성은 이미지맵의 형태를 지정합니다. rect(사각형), circle(원형), poly(다각형) 등의 속성값을 가질 수 있습니다.

coords속성은 좌표값을 지정합니다. 이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분을 지정합니다.

이 coords속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다.

이미지맵을 생성할 수 있는 프로그램을 사용하면 이미지상에서 원하는 부분을 하이퍼링크로 쉽게 만들 수 있습니다.

나모나 드림위버를 사용하면 이미지 상에서 영역을 지정하기에 아주 쉽게 이미지맵을 생성할 수 있습니다.

그러나 텍스트 에디터를 사용하는 경우 이 부분이 불편합니다.

그러므로 이미지맵을 생성하는 프로그램을 이용하면 옆에 보이는 그림처럼 이미지상에서 바로 영역을 지정하고 이를 HTML 문서로 저장할 수 있습니다.