[image] HTML - <area> 태그 - 이미지맵에서 특정 링크 영역 (= area태그 = 에어리어태그) (HTML5수정)

1. <area> 예제 - 이미지맵에서 특정 링크 영역
2. <area> 정의
3. <area> 구문
4. <area> 속성

<area> 예제 - 이미지맵에서 특정 링크 영역

<area> 정의

 
<map>태그로 정의되는 이미지맵에서 개별 링크 영역을 지정. 
※ 이미지맵 : 링크 영역 가진 이미지

 

---

 

1. 

• <area> 태그는 반드시 이미지맵을 정의하는 <map> 태그 안에서 사용해야 함.  (단독 사용 불가)
• <img> 태그 안의 usemap 속성은 <map> 태그 안의 name 속성과 연계해, 이미지와 맵간의 관계를 형성. (예 참고)
• (HTML4.01 / HTML5)에서는 종료태그 없이 사용하나, XHTML에서는 반드시 /로 닫아줘야 함 
• XHTML DTD 선언시, <map> 태그에서 id 속성 대신 name 속성 이용시 유효성 오류 생길 수 있으니 주의.
• HTML5에서 몇몇 속성이 추가/제거 됨.

 

2.

반응형 이미지맵 (= 이미지맵 리사이저)

• https://github.com/davidjbradshaw/image-map-resizer
• https://github.com/stowball/jQuery-rwdImageMaps

 

3. 이미지맵 링크 영역 설정기

• http://maschek.hu/imagemap/imgmap/

 

<area> 구문

 
<area shape="클릭 영역 모양" coords="클릭 영역 위치" href="링크 주소" target="띄울 창" onFocus="blur()">

Cf.
XHTML 경우
<area shape="클릭 영역 모양" coords="클릭 영역 위치" href="링크 주소" target="띄울 창" onFocus="blur()" />

 

<area> 속성