map標籤與area標籤怎麼使用

這次帶給大家map標籤與area標籤怎樣使用，是有那個map標籤與area標籤的注意事項有哪些，下面就是實戰案例，一起來看一下。

map標籤的用途：是與img標籤綁定使用的，常被用來賦予給客戶端圖像某處區域特殊的意義，點選該區域可跳到新的文件。

因為map標籤是與img標籤綁定使用的，所以我們需要為map標籤新增ID和name屬性，讓img標籤中的usemap屬性引用map標籤中的id或name屬性（由於瀏覽器的不同，usemap屬性接收二者之一的值，所以通常name和id屬性二者都寫，值相同），並配合area標籤進行使用。

範例程式碼如下：

nbsp;html>

    
    
        <img  src="/static/imghwm/default1.png" data-src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" class="lazy" alt="map標籤與area標籤怎麼使用" >
	<map>
	    <area>
	    <area>
	    <area>
	    <area>
	    <area>
	    <area>
	    <area>
	    <area>
	</map>
    

顯示效果如下：

我們可以看出這是一張地圖，如果單單只是一張圖片，就會顯得很單調，所以我們透過map標籤賦予各個省的區域以意義，在這裡我點擊新疆區域後跳到新疆的百度百科，如下圖：

這樣我們就可以直接了解每個省的歷史和文化，而不用再去一個個的去搜尋，顯得更人性化。

其中area標籤定義了圖像中被賦予特殊意義的區域，它主要的值有alt、cooreds、href、shape、target等

1、alt屬性

定義：規定區域的替代文字。

說明：如果寫入href屬性，則alt屬性是必寫的

2、cooreds屬性

定義：定義相關區域的座標

說明：和shape屬性搭配使用

#　　（1 ）當shape屬性為rect時，代表相關區域為矩形，則cooreds屬性值為(x1,y1,x2,y2),其中x1,y1為左上角的座標，x2,y2為右下角的座標；

　　（2）當shape屬性為circle時，代表相關區域為圓形，則cooreds屬性值為(x,y,radius),其中x,y為圓形的中心座標，radius為圓形的半徑；

　　（3）當shape屬性為poly時，代表相關區域為多邊形，則cooreds屬性值為(x1,y1,x2,y2, x3,y3......xn,yn),規定了多邊形各頂點的座標，由於瀏覽器會自動閉合多邊形，所以尾部座標不必與第一個座標相等。

3、href屬性

#定義：定義了相關區域所連目標

#說明：href屬性一般有三種值

（1）絕對路徑：通常用來指向其他的網站如（href="https://www.baidu.com" )

　　（2）相對路徑：通常用來指向自身網站內的某個檔案如（href="//favicon.ico"）

#　　（3）錨定連結：通常用來指向頁面中的錨如（href="#header"）

4、shape屬性

#定義：定義了相關區域的形狀

說明：（1）預設值（default）:規定全部區域

#

           （2）rect:規定相關區域為矩形

           （3）circle:規定相關區域為圓形

           （4）poly:規定先關區域為多邊形

5、target屬性

定義：定義了在何處開啟目標連結

說明：（1）_blank:在新視窗開啟被連結的文件

##           （2）_self:默認，在相同框架中開啟被連結的文件

           （3）_parent:在父框架集中開啟已連結的文件

          4）_top：在整個視窗中開啟被連結文件

###　　　（5）framename:在指定框架中開啟被連結文件#############說明：area標籤有些時候也可以當做a標籤的替代品，因為a標籤並不能直接嵌套a標籤，在某些情況下，我們又不得不用，那麼我們可以把a標籤替換為area標籤，使佈局更加簡單。 #########我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########jest測試react native元件的步奏是什麼######js的自訂trim函數使用方法######

以上是map標籤與area標籤怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！