HTML 지도 태그를 사용하는 방법-프런트엔드 Q&A-php.cn

HTML 지도 태그를 사용하는 방법

青灯夜游

풀어 주다： 2019-05-27 13:15:12

원래의

4082명이 탐색했습니다.

html 지도 태그는 클라이언트 측 이미지 매핑에 사용됩니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다. HTML 지도 태그를 사용하는 방법 의 usemap 속성은 의 id 또는 name 속성을 참조할 수 있으므로(브라우저에 따라) id와 name 속성을 모두 에 추가해야 합니다.

HTML 지도 태그를 사용하는 방법

html 지도 태그를 어떻게 사용하나요?

기능: 클라이언트 이미지 매핑을 정의합니다.

설명: 이미지맵은 클릭할 수 있는 영역이 있는 이미지를 말합니다.

참고: 영역 요소는 항상 지도 요소 내에 중첩됩니다. 영역 요소는 이미지 맵의 영역을 정의합니다. HTML 지도 태그를 사용하는 방법 의 usemap 속성은 의 id 또는 name 속성을 참조할 수 있으므로(브라우저에 따라) id와 name 속성을 모두 에 추가해야 합니다.

html 지도 태그 예

<!DOCTYPE html>
<html>
<body>

<img
src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

로그인 후 복사

출력:

HTML 지도 태그를 사용하는 방법