HTML <area> 태그

정의와 사용법

<area> 태그 내부에 포함됩니다(이미지 맵핑은 클릭 가능 영역을 가진 이미지, 즉 클라이언트의 분할 응답 그래픽입니다).

<area> 요소는 항상 <map> 태그내부에.

주의:<img> 내부에 usemap 속성 와 <map> 요소 의 name 속성관련하여, 이미지와 맵핑 간의 연결을 만듭니다.

또한 참조:

HTML DOM 참조 매뉴얼:Area 객체

인스턴스

예제 1

클릭 가능 영역을 가진 이미지 맵핑:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">

직접 시험해 보세요

예제 2

또 다른 클릭 가능 영역을 가진 이미지 맵핑:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">

  <area shape="rect" coords="0,0,114,576" alt="태양" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="수성" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="金星" href="venus.html">

직접 시험해 보세요

정의된 영역의 대체 텍스트를 정의합니다. href 속성이 있으면 필수입니다。
정의된 영역의 좌표를 정의합니다。
사용자가 슈퍼 링크를 클릭할 때 다운로드할 목표를 정의합니다.
정의된 영역의 슈퍼 링크 목표를 정의합니다。
목표 URL의 언어를 정의합니다.
목표 URL을 최적화할 미디어/장치를 정의합니다。
링크와 함께 전송할 참조 정보를 정의합니다。
현재 문서와 목표 URL 간의 관계를 정의합니다。
정의된 영역의 형상을 정의합니다。
  • 프레임 이름
 목표 URL을 어디서 엽니다.를 정의합니다.
type 미디어 유형 목표 URL의 미디어 유형을 정의합니다。

전역 속성

<area> 태그는 이벤트 속성을 지원합니다 HTML의 전역 속성。

이벤트 속성

<area> 태그는 이벤트 속성을 지원합니다 HTML의 이벤트 속성。

기본의 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <area> 요소:

area {
  display: none;
{}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원