首先讓我們來看一下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<map>標簽常用在為圖像的某區域添加超鏈接！

用法如下：

<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屬性獲取<map>標簽信息，<area> 標簽定義一個鏈接區域，shape屬性定義區域形狀，coords屬性定義鏈接區域的起點坐標和終點坐標

注釋：area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

注釋：<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決于瀏覽器），所以我們應同時向 <map> 添加 id 和 name 屬性。

【相關推薦】

HTML5<progress>標簽是什么意思？HTML5<progress>標簽的基本用法詳解

html textarea是什么意思？如何獲取textarea標簽中的換行符和空格？

以上就是html map標簽是什么？html map標簽的結構及具體使用方法詳解的詳細內容，更多請關注php中文網其它相關文章！