HTML <area> 좌표 속성

<시간/>

요소의 cords 속성은 이미지 맵에서 영역의 좌표를 설정하는 데 사용됩니다. shape 속성과 함께 속성을 사용하고 영역의 크기와 모양을 설정합니다.

다음은 구문입니다.

<area coords="value">

위의 값에서 다른 매개변수로 다음 좌표를 설정할 수 있습니다 -

x1,y1,x2,y2	사각형의 왼쪽 위 모서리와 오른쪽 아래 모서리 좌표(shape="rect")
x,y,반지름	원 중심과 반지름의 좌표(shape="circle")
x1,y1,x2,y2,..,xn,yn	다각형 가장자리의 좌표입니다.

이제 요소 −

의 코드 속성을 구현하는 예를 살펴보겠습니다.

예시

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

출력

HTML area 좌표 속성

위의 예에서 우리는 다음 이미지에 지도를 설정했습니다 -

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

이제 모양에 대한 지도와 영역을 설정했습니다.

<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
</map>

영역을 설정하는 동안 코드 속성 −

으로 영역의 좌표를 설정했습니다.

<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" />

HTML 좌표 속성

예시

출력