您好,登錄后才能下訂單哦!
小編給大家分享一下html5中map標簽怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
html5中map標簽用于定義一個客戶端圖像映射,也就是一個有可點擊區域的圖像,語法為“<map name="value">...</map>”,圖像元素可以引用該標簽的“name”屬性來實現圖像映射,因此“name”屬性是必不可少的。
本教程操作環境:windows10系統、HTML5版、Dell G3電腦。
<map> 標簽用于客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。
<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決于瀏覽器),所以我們應同時向 <map> 添加 id 和 name 屬性。
area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。
語法如下:
<map name="value">...</map>
示例如下:
<html> <head> <meta charset="utf-8"> <title>123</title> </head> <body> <p>點擊太陽或其他行星,注意變化:</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>
輸出結果:
當點擊圖片之后,會跳轉頁面:
以上是“html5中map標簽怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。