這篇文章主要介紹了html中map標(biāo)簽是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

延津網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

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

html map標(biāo)簽:定義一個(gè)客戶端圖像映射。圖像映射（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í)，四個(gè)數(shù)字依次為：起點(diǎn)X、起點(diǎn)Y、終點(diǎn)X、終點(diǎn)Y

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

當(dāng)shape=poligon時(shí)，可定義多個(gè)路徑點(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 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('汽車圖標(biāo)');" alt=""/>
    </map>
</div>

2、如果有多張圖片，一張圖片對應(yīng)一個(gè)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('汽車圖標(biāo)');" alt=""/>
     </map>
    <!-- 一張圖片對應(yīng)一個(gè)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('第二張圖的汽車圖標(biāo)');" alt=""/>
     </map>
</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)簽定義一個(gè)鏈接區(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)同時(shí)向 <map> 添加 id 和 name 屬性。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html中map標(biāo)簽是什么內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

分享題目：html中map標(biāo)簽是什么
網(wǎng)站地址：http://sd-ha.com/article36/gpsopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站維護(hù)、ChatGPT、云服務(wù)器、小程序開發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)