首先讓我們來看一下html map標(biāo)簽是什么：

html map標(biāo)簽:定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點(diǎn)擊區(qū)域的一幅圖像。

定義map：

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

map標(biāo)簽定義map，area標(biāo)簽定義可點(diǎn)擊的熱點(diǎn)，area屬性;

shape：定義熱點(diǎn)形狀，可選參數(shù) rect(矩形)、circle(圓形)、poligon(自定義形狀)。

coords：定義形狀路徑;

當(dāng)shape=rect時，四個數(shù)字依次為：起點(diǎn)X、起點(diǎn)Y、終點(diǎn)X、終點(diǎn)Y

當(dāng)shape=circle時，三個數(shù)字依次為：中心點(diǎn)X、中心點(diǎn)Y、半徑

當(dāng)shape=poligon時，可定義多個路徑點(diǎn)，依次為：起點(diǎn)X、起點(diǎn)Y、路徑1X、路徑1Y、路徑2X、路徑2Y......

href定義點(diǎn)擊跳轉(zhuǎn)的地址。

html map標(biāo)簽必需的屬性：

id ： unique_name ： 為 map 標(biāo)簽定義唯一的名稱。

html map標(biāo)簽可選的屬性：

name ： mapname ： 為 image-map 規(guī)定的名稱。

map標(biāo)簽在HTML中的結(jié)構(gòu)：

1、coords的對應(yīng)坐標(biāo)不用變，只需在JS里面改變其比例就OK！

 div >

2、如果有多張圖片，一張圖片對應(yīng)一個map，class不用變，改變map的name值和對應(yīng)的usemap值就好。name=usemap他們倆是一對CP哦，不要分開它們，給他們一樣的值。

 div >

html map 標(biāo)簽常用在為圖像的某區(qū)域添加超鏈接！

用法如下：

 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 標(biāo)簽信息， area 標(biāo)簽定義一個鏈接區(qū)域，shape屬性定義區(qū)域形狀，coords屬性定義鏈接區(qū)域的起點(diǎn)坐標(biāo)和終點(diǎn)坐標(biāo)

注釋：area 元素永遠(yuǎn)嵌套在 map 元素內(nèi)部。area 元素可定義圖像映射中的區(qū)域。

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

【相關(guān)推薦】

HTML5 progress 標(biāo)簽是什么意思？HTML5 progress 標(biāo)簽的基本用法詳解

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

以上就是html map標(biāo)簽是什么？html map標(biāo)簽的結(jié)構(gòu)及具體使用方法詳解的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。