HTML5 map area 엘리먼트(element)

HTML5 map area 엘리먼트(element)

map엘리먼트는 이미지맵을 정의하는 엘리먼트이다.
img엘리먼트나 objec t엘리먼트를 이용하여 이미지 삽입후에 다수이미지에 대한 이미지맵을 정의한다.

자식엘리먼트가 area로 맵의 하이퍼링크를 표현한다.
html5에서는 area의 속성엘리먼트 noHref(일크없음)이 사라지고 좀더참조핳 hreflang(링크할 언어종류),
meadia,pinㅎ(서버용어플리케이션호출), rel이 추가되었다. 사용하는 예를 보자

1. img나 object로 이미지를 삽입하고 속성엘리먼트 usemap으로 지정한다.

<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />

2. map 엘리먼트 시작 name과 id 속성의 값을 같게 작성하고 연계하도록 한다.
usemap에서 box로 했듯이 여기서도 box로 해주었다.

<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />
<map name="box" id="box">
...
</map>

이렇게 해서 연계된다

3.area엘리먼트
shape는 형태를 말한다 사각형(rect) 다각형(poly) 원형(circle)이있다.

coords는 위치를 지정해준다
다음그림을 참조하자

그림의 크기는 가로 200px 세로 100px이다.
(x,y)는 가로 세로 위치이다.

먼저 사각형은 시작점과 대각선 끝점으로 지정된다.
다각형은 시계방향으로 좌표를 지정한다.

마지막으로 원은 제일쉽다 원의 중심 그리고 반지름을 지정하면된다.
이렇게 지정한 영역을 클릭시 지정한 곳으로 하이퍼링크된다.

area엘리먼트에서 alt역시 필수

<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />

<map name="box" id="box">

<area shape="rect" coords="0, 0, 50, 100" alt="" href="#" />

<area shape="rect" coords="50, 0, 100, 100" alt="" href="#" />

<area shape="poly" coords="100, 100, 125, 0, 150,100" alt="" href="#" />

<area shape="circle" coords="175,50,25" alt="" href="#" />

</map>