HTML <area> shape 속성

HTML <area> 태그

정의 및 사용법

shape 속성이 영역의 형태를 규정합니다.

shape 속성과 coords 속성 영역의 크기, 형태 및 위치를 규정하는 데 함께 사용됩니다.

예제

shape 속성을 사용하여 이미지 맵에서 각 영역의 형태를 지정합니다:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

본인이 직접 시도해 보세요

문법

<area shape="default|rect|circle|poly">

속성 값

값 설명
default 전체 영역을 규정합니다.
rect 다각형 영역을 정의합니다.
circle 원형 영역을 정의합니다.
poly 다각형 영역을 정의합니다.

상세 설명:

shape 속성은 이미지 맵에서 마우스에 민감한 영역의 형태를 정의하는 데 사용됩니다:

  • 원형(circ 또는 circle)
  • 다각형(poly 또는 polygon)
  • 다각형(rect 또는 rectangle)

shape 속성의 값은 브라우저가 coords 속성을 해석하는 방식에 영향을 미칩니다. 사용하지 않으면 shape 속성이 있으면, 기본적으로 default 값이 사용됩니다. 표준에 따르면, default는 해당 영역이 전체 이미지를 덮는 것을 의미합니다. 실제로는, 브라우저는 기본적으로 사각형 영역을 사용하며, 4개의 coords 값을 찾을 것을 기대합니다. 형상이 지정되지 않았으며, 태그에 4개의 좌표가 포함되지 않았다면, 브라우저는 전체 영역을 무시합니다.

인식할 수 있습니다 shape 속성의 default 값이 있는 브라우저는, 다른 핫스팟 정의 범위를 초과하는 경우 클릭할 수 있는 전체 핫스팟 영역을 제공할 수 있습니다. <map> 태그에서 영역은 "먼저 온 것 먼저 처리" 원칙에 따라 사용되므로, 모든 기본 영역은 마지막에 배치해야 합니다. 그렇지 않으면, 기본 영역은 다른 이미지 맵에서 나타나는 모든 영역을 덮습니다.

브라우저는 형상 이름의 구현에 대해 강제적인 요구사항이 없습니다. 예를 들어, 사각형의 경우, 넷스케이프 4는 "rectangle"를 인식할 수 없지만, "rect"를 인식할 수 있습니다. 이 이유로, 우리는 약자 이름을 사용하는 것을 권장합니다.

브라우저 지원

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

HTML <area> 태그