이미지맵은 하나의 이미지에 여러개의 링크를 걸때 사용합니다.
이미지맵을 사용하면 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속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다.
