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('汽车图标');" 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('汽车图标');" 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('第二张图的汽车图标');" alt=""/> </map> </div>
htmldab9f699790ab0922e596ecb9f6677d5 태그는 일반적으로 이미지의 특정 영역에 하이퍼링크를 추가하는 데 사용됩니다!
사용법은 다음과 같습니다.
<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 속성은 dab9f699790ab0922e596ecb9f6677d5 라벨 정보를 가져오고, 03fc64e1e502d5ba947b3a9af06d2d2a 라벨은 링크 영역을 정의하고, Shape 속성은 영역 모양을 정의하며, coords 속성은 시작점 좌표와 끝점 좌표를 정의합니다.
참고: 영역 요소는 항상 지도 요소 내에 중첩됩니다. 영역 요소는 이미지 맵의 영역을 정의합니다.
참고: a1f02c36ba31691bcfe87b2722de723b의 usemap 속성은 dab9f699790ab0922e596ecb9f6677d5의 id 또는 name 속성을 참조할 수 있으므로(브라우저에 따라) id와 name 속성을 모두 dab9f699790ab0922e596ecb9f6677d5에 추가해야 합니다.
【관련 추천】
html 텍스트 영역은 무엇을 의미하나요? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까?
위 내용은 HTML 지도 태그란 무엇입니까? HTML 지도 태그의 구조와 구체적인 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!