HTML - ImageMap 이미지맵

이미지맵

이미지맵은 HTML에서 한 이미지에 여러개 또는 특정 부분에 링크를 걸때 사용하게 됩니다.

위와 같이 이미지에 usemap 이라는 속성을 이용하여 map을 지정하여 사용하게 됩니다.

이제 등록하는 부분에 대한 소스를 살펴보도록 하자

우선 이미지 태그로 이미지를 불러오고 usemap 이라는 곳에 사용할 map의 id 값을 입력해 준다.

그러고 나서 map에 대한 내용을 작성해 준다.

여기서 주의점은 img의 usemap 값과 map태그의 id값이 같아야 한다는 것이다.

그리고 나서 area라는 태그를 써서 영역을 작성해준다 .

area 태그의 속성

shapre : 영역의 모양을 지정한다.rect(사각형), circle(원형), poly(다각형) 의 3가지가 있다.

coords : 지정한 모양의 좌표를 의미한다.