|
<img src="../gif/mapsample.gif" usemap="#mapname" border=1>
<map name="mapname">
<area shape="rect" coords="1, 1, 86, 26"
href="../index.html" target="right">
<area shape="rect" coords="1, 27, 86, 52"
href="../../sitelink/index.html" target="right">
<area shape="rect" coords="1, 53, 86, 78"
href="../../main/index.html" target="right">
<area shape="rect" coords="1, 79, 86, 106" alt="연결없음">
<area shape="rect" coords="1, 107, 86, 130"
href="../../main/sitemap.html">
</map>
|
<map>은 전체 이미지를 이미지맵으로 사용한다는 엘레멘트이고, area는 마우스가 올라가는 한 지역을 말하는 엘레멘트이다.
<map> 사용 가능한 애트리뷰트는
- name
- image usemap="#mapname"에 지정한 겉과 같아야 한다.
area에 사용 가능한 애트리뷰트는
- href
- 현재 지역(area)의 연결 URI를 말하며, <a href="...">...</a>와 같은 연결을 의미한다.
- shape
- 모양(shape)은 그 지역의 모양을 지정하며, shape에는 4가지가 있다.
- default: 전 지역 지정
- rect: 사각형 지역
- circle: 원 지역
- poly: 다각형 지역
- coords
- 좌표(coords)는 그 지역의 모양(shape)에 따라 다르다.
- default: 전 지역 지정하므로 좌표가 필요 없다.
- rect: 예제에서는 이 사각형 지역으로 지정되었다.
전체 이미지의 폭은 86 픽셀, 높이는 132 픽셀이므로 각 개별 항목의 크기는 86 * 26이 된다.
좌표 x1,y1,x2,y2는 각각 좌측 맨위(a), 우측맨위(b), 좌측아래(c), 우측아래(d)의 꼭지점을 갖는 사각형에서, 점 (a)와 (b)만 지정하면 결정되므로, x1은 (a)의 가로좌표, (a)의 세로좌표, (b)의 가로좌표, (b)의 세로좌표로 표시하면 된다.
- circle: 원 지역에서는 circle:: (원) 중심의 x 좌표, 중심의 y 좌표, 반경 r로 구성되고, 반경의 값이 백분율일 때, 사용도구는 오브젝트의 너비와 높이에 기준하여 최종 반경을 계산하여야 하는데, 반경은 이 두 수치보다 작아야한다.
- poly: 다각형 지역에서는 각 점의 좌표(xn, yn)들을 계속 열거하여 그들을 연결하여 얻은 다각형을 말하는데, 마지막 좌표는 시작 좌표와 같아 지므로 생략한다.
- 다른 애트리뷰트들
- 다른 애트리뷰트들은 앤커 애트리뷰트와 유사하며, 자세한 내용을 규격을 참조하라.
|
