온라인 도구

참조 매뉴얼

: <progress> 태그

HTML: <a> coords 속성

온라인 예제

이미지 맵에서shape와coords 속성을 사용하여<a> 요소를 사용하여 이미지 맵을 생성합니다:

예제
<!doctype html>
<html>
<head>　-　<title>html: <a> coords 속성 사용3codebox.com)</title>
</head>
body
<p>이미지 중에 태양이나 주변 행성을 클릭하세요:</p>
<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1">
　<map name="Map1">
　　　<a href="sun.html" shape="rect" coords="0,0,,82,126">태양</a>
　　　<a href="mercur.html" shape="circle" coords="90,,58,3">수성</a>
　　　<a href="venus.html" shape="circle" coords="124,58,8">金星</a>
　</map>
</object>
<p><b>주의:</b>현재만Firefox와Opera 브라우저가coords 속성을 지원합니다.</p>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

현재 coords 속성을 지원하는 브라우저는 Firefox와 Opera뿐입니다.

정의 및 사용법

HTML5<a> coords 속성을 지원하지 않습니다.

coords 속성은 다음과 함께 사용됩니다. shape 속성을 함께 사용하여 <object> 또는 <img> 요소에 링크된 크기, 형상 및 위치를 정의할 수 있습니다.

왼쪽 상단 좌표는 0,0입니다.

건의:모든 브라우저에서 사용할 수 있는 이미지 맵을 생성하려면, 다음을 사용하십시오. <area> 　요소.

문법

<a coords="value">

속성 값

값	설명
x1,y1,x2,y2	shape 속성이 "rect"로 설정되면, 이 값은矩形的 좌상단과 우하단 좌표를 정의합니다.
x,y,radius	shape 속성이 "circ"로 설정되면, 이 값은 원심 좌표와 半径을 정의합니다.
x1,y1,x2,y2,..,xn,yn	shape 속성이 "poly"로 설정되면, 이 값은 다각형 각辺의 좌표를 정의합니다. 첫 번째 좌표와 마지막 좌표가 다를 경우, 다각형을 닫기 위해 브라우저는 마지막 좌표 쌍을 추가해야 합니다.

HTML <a> 태그

HTML: <template> 태그