HTML 지도 태그란 무엇입니까? HTML 지도 태그의 구조와 구체적인 사용법에 대한 자세한 설명

html 지도 태그란 무엇인가요? HTML 지도 태그의 구조와 구체적인 사용법은 무엇입니까? 다음 기사에서는 주로 html 맵 태그의 의미와 html 맵 태그의 속성에 대한 일부 설명, html 맵 태그의 구체적인 사용법을 설명합니다.

먼저 html 지도 태그가 무엇인지 살펴보겠습니다.

html 지도 태그: 클라이언트측 이미지 매핑을 정의합니다. 이미지맵은 클릭 가능한 영역이 있는 이미지를 말합니다.

지도 정의:

<map id="im_map" name="im_map">
<area shape="rect" coords="0,0,100,100" href="url.html" />
</map>

map 태그는 지도를 정의하고, 지역 태그는 클릭 가능한 핫스팟, 지역 속성을 정의합니다.

shape: 핫스팟 모양, 선택적 매개변수 각형(직사각형), 원(원), 다각형(사용자 정의 모양)을 정의합니다.

coords: 모양 경로를 정의합니다.

모양=직사각형인 경우 4개의 숫자는 다음과 같습니다: 시작점 X, 시작점 Y, 끝점 X, 끝점 Y

모양=원인 경우 3개의 숫자는 중심점입니다. X , 중심점 Y, 반경

shape=다각형인 경우 여러 경로 점을 순서대로 정의할 수 있습니다: 시작점 X, 시작점 Y, 경로 1X, 경로 1Y, 경로 2X, 경로 2Y...

href 정의 클릭하면 이동할 주소입니다.

html 지도 태그 필수 속성:

id: Unique_name: 지도 태그의 고유한 이름을 정의합니다.

html 맵 태그의 선택적 속성:

name: mapname: 이미지 맵에 지정된 이름입니다.

HTML의 지도 태그 구조:

1. 해당 좌표의 좌표는 변경할 필요가 없습니다. JS에서 비율만 변경하면 괜찮습니다!

<div class="map_img">
     <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
     <map name="mapName">
        <!-- 方形区域写法 -->
        <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" alt=""/> -->
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
    </map>
</div>

2. 사진이 여러 장일 경우 하나의 사진이 하나의 맵에 해당하므로 클래스를 변경할 필요는 없습니다. 맵의 이름 값과 해당하는 usemap 값만 변경하면 됩니다. name=usemap CP 쌍이므로 분리하지 말고 동일한 값을 지정하세요.

<div class="map_img">
    <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
    <map name="mapName">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
     </map>
    <!-- 一张图片对应一个name和usemap -->
    <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px">
     <map name="mapName2">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;第二张图的汽车图标&#39;);" alt=""/>
     </map>
</div>

html

사용법은 다음과 같습니다.

<img src ="planets.gif" alt="无法显示此图像" usemap ="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map>

usemap 속성은

참고: 영역 요소는 항상 지도 요소 내에 중첩됩니다. 영역 요소는 이미지 맵의 영역을 정의합니다.

참고: 의 usemap 속성은

【관련 추천】

HTML5 태그는 무엇을 의미하나요? HTML5 태그의 기본 사용법에 대한 자세한 설명

html 텍스트 영역은 무엇을 의미하나요? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까?

위 내용은 HTML 지도 태그란 무엇입니까? HTML 지도 태그의 구조와 구체적인 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!