HTML <map> 태그
예시
클릭 가능한 영역이 있는 이미지 맵:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect"
coords="34,44,270,350" alt="Computer" href="computer.htm">
<area
shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
<map>태그는 이미지 맵을 정의하는 데 사용됩니다 . 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다.
<map>요소 의 필수 이름 속성은 <img> 의 usemap 속성과 연결되며 이미지와 지도 간의 관계를 생성합니다.
<map>요소에는 이미지 맵에서 클릭 가능한 영역을 정의하는 여러 <area> 요소 가 포함 되어 있습니다.
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <map> | Yes | Yes | Yes | Yes | Yes |
속성
| Attribute | Value | Description |
|---|---|---|
| name | mapname | Required. Specifies the name of the image map |
전역 속성
<map>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<map>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
클릭 가능한 영역이 있는 또 다른 이미지 맵:
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
관련 페이지
HTML DOM 참조: 지도 개체
기본 CSS 설정
대부분의 브라우저는 <map>다음 기본값으로 요소를 표시합니다.
map {
display: inline;
}