首先讓我們來看一下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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選