html5中map標(biāo)簽用于定義一個(gè)客戶端圖像映射,也就是一個(gè)有可點(diǎn)擊區(qū)域的圖像,語(yǔ)法為“<map name="value">…</map>”,圖像元素可以引用該標(biāo)簽的“name”屬性來(lái)實(shí)現(xiàn)圖像映射,因此“name”屬性是必不可少的。
本教程操作環(huán)境:windows10系統(tǒng)、HTML5版、Dell G3電腦。
html5中map標(biāo)簽的用法是什么
<map> 標(biāo)簽用于客戶端圖像映射。圖像映射指帶有可點(diǎn)擊區(qū)域的一幅圖像。
<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決于瀏覽器),所以我們應(yīng)同時(shí)向 <map> 添加 id 和 name 屬性。
area 元素永遠(yuǎn)嵌套在 map 元素內(nèi)部。area 元素可定義圖像映射中的區(qū)域。
語(yǔ)法如下:
<map name="value">...</map>
示例如下:
<html> <head> <meta charset="utf-8"> <title>123</title> </head> <body> <p>點(diǎn)擊太陽(yáng)或其他行星,注意變化:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
輸出結(jié)果:
當(dāng)點(diǎn)擊圖片之后,會(huì)跳轉(zhuǎn)頁(yè)面:
推薦教程:《html視頻教程》