map標籤與area標籤怎麼使用

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

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

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

範例程式碼如下：

顯示效果如下：

我們可以看出這是一張地圖，如果單單只是一張圖片，就會顯得很單調，所以我們透過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屬性

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

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

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

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