html map標籤是什麼？ html map標籤的結構及具體使用方法又有哪些？以下這篇文章主要為大家講述了html map標籤的意思和html map標籤的屬性的一些解釋，還有html map標籤的具體用法。
首先讓我們來看html map標籤是什麼：
html map標籤:定義一個客戶端映像映射。影像映射（image-map）指帶有可點擊區域的一幅影像。
定義map：
<map id="im_map" name="im_map"> <area shape="rect" coords="0,0,100,100" href="url.html" /> </map>
map標籤定義map，area標籤定義可點擊的熱點，area屬性;
shape：定義熱點形狀，可選參數rect(矩形)、circle(圓形)、poligon(自訂形狀)。
coords：定義形狀路徑;
當shape=rect時，四個數字依序為：起點X、起點Y、終點X、終點Y
當shape= circle時，三個數字依序為：中心點X、中心點Y、半徑
當shape=poligon時，可定義多個路徑點，依序為：起點X、起點Y、路徑1X、路徑1Y、路徑2X、路徑2Y......
href定義點選跳轉的位址。
html map標籤必要的屬性：
id ： unique_name ： 為 map 標籤定義唯一的名稱。
html map標籤可選的屬性：
name ： mapname ： 為 image-map 規定的名稱。
map標籤在HTML中的結構：
1、coords的對應座標不用變，只要在JS裡面改變其比例就OK！
<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、如果有多張圖片，一張圖片對應一個map，class不用變，改變map的name值和對應的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>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屬性取得
註解：area 元素永遠嵌套在map 元素內部。 area 元素可定義影像映射中的區域。
註解：中的 usemap 屬性可引用
【相關推薦】
html textarea是什麼意思？如何取得textarea標籤中的換行符和空格？
以上是html map標籤是什麼？ html map標籤的結構及具體使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
