您好,登錄后才能下訂單哦!
這篇文章主要介紹了html中map標簽是什么,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
首先讓我們來看一下html map標簽是什么:
html map標簽:定義一個客戶端圖像映射。圖像映射(image-map)指帶有可點擊區(qū)域的一幅圖像。
定義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:定義熱點形狀,可選參數(shù) rect(矩形)、circle(圓形)、poligon(自定義形狀)。
coords:定義形狀路徑;
當shape=rect時,四個數(shù)字依次為:起點X、起點Y、終點X、終點Y
當shape=circle時,三個數(shù)字依次為:中心點X、中心點Y、半徑
當shape=poligon時,可定義多個路徑點,依次為:起點X、起點Y、路徑1X、路徑1Y、路徑2X、路徑2Y......
href定義點擊跳轉(zhuǎn)的地址。
html map標簽必需的屬性:
id : unique_name : 為 map 標簽定義唯一的名稱。
html map標簽可選的屬性:
name : mapname : 為 image-map 規(guī)定的名稱。
map標簽在HTML中的結(jié)構(gòu):
1、coords的對應(yīng)坐標不用變,只需在JS里面改變其比例就OK!
<div class="map_img"> <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px"> <map name="mapName"> <!-- 方形區(qū)域?qū)懛?--> <!-- <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、如果有多張圖片,一張圖片對應(yīng)一個map,class不用變,改變map的name值和對應(yīng)的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> <!-- 一張圖片對應(yīng)一個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>標簽常用在為圖像的某區(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>標簽信息,<area> 標簽定義一個鏈接區(qū)域,shape屬性定義區(qū)域形狀,coords屬性定義鏈接區(qū)域的起點坐標和終點坐標
注釋:area 元素永遠嵌套在 map 元素內(nèi)部。area 元素可定義圖像映射中的區(qū)域。
注釋:<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決于瀏覽器),所以我們應(yīng)同時向 <map> 添加 id 和 name 屬性。
感謝你能夠認真閱讀完這篇文章,希望小編分享html中map標簽是什么內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。