當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML areamap标签及在实际开发中的应用

發布時間：2025/4/16 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML areamap标签及在实际开发中的应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML <area><map>標簽及在實際開發中的應用

by?zhangxinxu?from?http://www.zhangxinxu.com/wordpress/?p=6115
本文可全文轉載，但需得到原作者書面許可，同時保留原作者和出處，摘要引流則隨意。

之前，我一直以為HTML?<area>是一個雞肋HTML，估計到了HTML5時代會被廢棄的命。但是，最近一查資料，乖乖了個咚，不僅沒被廢棄，反而發展了，新增了一些標簽屬性，例如rel，media，hreflang等。

然后進一步研究發現，尼瑪這貨居然還可以用來解決一個困擾我很多年的棘手問題，形象立馬高大上了起來。

一、HTML <area>原本作用

HTML?<area>原本作用是給<img>圖像標記熱點區域用的。例如一張中國省份地圖，點擊對應省份顯示對應省份介紹的頁面；又或者旭旭影院或者旭旭餐廳的座位平面圖，點擊對應座位選座，都是可以使用<area>標簽的。

言語蒼白，實例說話，您可以狠狠地點擊這里：HTML <area>基本使用demo

HTML代碼如下：

此時圖片上就有3個熱區，我們使用Tab鍵索引高亮就可以窺見其輪廓范圍，如下圖片3連擊：

圖片和熱點區域元素關聯是使用圖片的usemap屬性，其值對應<map>的id或者name值（Chrome瀏覽器只支持name屬性值關聯）。

這里出現了兩個HTML標簽，一個是<area>還有一個是<map>，這些都是從很早就支持的HTML標簽，所以不必擔心兼容性問題。其中就閉合特性來看，<area>類似<img>，是無法有子元素或其他子內容的。

這里出現了幾個屬性：

shape

shape表示點擊熱點區域的形狀，支持矩形rect，圓形circle以及多邊形poly。

coords

coords表示點擊熱點區域形狀的坐標。坐標點0,0表示圖片的左上角。其中矩形rect支持4個數值，2個坐標，分別是矩形左上角坐標和矩形右下角坐標。例如，coords="20,20,80,80"生成的就是一個左上角坐標20,20寬高都是60px的矩形區域。圓形circle支持3個數值，前2個值為圓心坐標，第3個值為圓的半徑大小。多邊形poly就更簡單了，每兩個數值組合表示一個坐標點，依次連線形成的區域就是最終的熱點區域。

href

href和<a>元素的href是一樣的東西，直接跳轉地址，或者錨點等。也同樣支持target屬性和rel屬性。也就是說<area>可以看成是半個<a>元素。

alt

alt同<img>元素的alt，表示熱點區域圖片的描述信息。

如果<area>要想和圖片熱點關聯，祖先元素<map>是不可缺少的，但是不一定非得直接父子關系。<map>和<area>之間再嵌套個<div>什么的功能也是正常的。

如果單從<area>原本作用來講，這應該是一個非常有實用價值的屬性，例如，社交站點的圖片往往都會有人類識別標注功能，類似這樣：

跟<area>的熱點看上去就是一個東西，然而，實際上，我們很少很少使用<area>元素，為什么呢？

因為圖片上熱點區域的樣式根本無法自定義，除了可以顯示outline輪廓意外，什么邊框背景色都不行，對area進行CSS設置，也僅僅是改變這個標簽元素本身的樣式，而不是圖片上熱點點擊區域的樣式。于是，最終，圖片上的標注或者熱點，我們常常是使用其他標簽，如<div>，或者<a>標簽進行覆蓋進行模擬。

也就是說，HTML?<area>只能作用于對點擊熱點沒有任何樣式要求的場景。考慮到這種場景使用<a>標簽模擬也是可以的，進一步壓縮了HTML?<area>的實用價值。除非是不規則的點擊熱點，因為這種不規則區域包括IE8這種不支持CSS3的瀏覽器也是支持的，如下圖：

所以，這么多年下來，從沒使用過<area>，也沒有什么異樣，花兒還是那么香，霧霾還是那么浪。難道，HTML?<area>真的一無是處，只能在某些罕見場景下才有存在價值嗎？

如果真是這樣，我也不會寫這篇文章了，實際上，偶然間，我發現了關于<area>一個隱匿的特性，這個特性可能會讓<area>遠離霧霾，聞到花香。

二、HTML <area>衍生的更有價值的作用

正如前文提到的，<area>元素可以看出半個<a>元素，這句話很關鍵，換句話說，有時候，我們可以使用<area>元素代替<a>元素。

于是，我們的思路就變成：<a>元素有什么局限性，導致有時候我們需要使用<area>代替<a>元素呢？

答案就是：<a>不支持嵌套。例如：

瀏覽器會將其解析為相鄰兄弟關系，而不是父子關系，如下截圖示意：

所以，如果我們有鏈接嵌套的需求，就可以試試使用<area>元素，舉個例子，如下圖標注：

上圖黃色高亮區域點擊是去“書籍詳細頁”，而點擊列表其它任意區域是去“書籍閱讀頁”，請問該當如何實現？

傳統方法，比較好是改變視覺DOM結構和順序，使鏈接內容變成相鄰關系，再通過CSS重新布局定位，雖然麻煩了點，但至少語義和無障礙訪問這一塊還是很好的；比較次的方法是使用JS，點擊目標區域preventDefault阻止默認事件，然后再location.href跳轉之類。

實際上，還有一種更好的做法，就是<a>元素中嵌套<area>元素，可以保證DOM結構符合視覺呈現，又無需JS輔助。

眼見為實，您可以狠狠地點擊這里：借助area元素實現的鏈接嵌套demo

demo截圖如下：

在Chrome和IE9+瀏覽器下，點擊圖片以及標題會跳轉到“書籍詳情頁”，而點擊其他區域就會跳到“書籍閱讀頁”，鏈接嵌套功能就這么實現了。

其中，demo中，圖片的鏈接嵌套和標題文字的實現原理有所不同。

圖片的鏈接嵌套用法更加規范，也就是借助<map>和<area>元素在圖片上創造點擊熱點，相關HTML代碼如下：

也就是把整個圖片區域都作為點擊熱點，充分發揮了<area>標簽本身的特性，沒有任何兼容性問題，鍵盤訪問等都非常良好，又滿足我們鏈接嵌套功能，<area>元素的實用價值大大地得以體現。

對于標題文字 “都市獵人”的鏈接內嵌處理則要麻煩一些。demo實例頁面的做法是，在文字前面直接放置了一個裸的<area>元素，通過CSS設置覆蓋文字實現的，相關HTML和CSS代碼如下：

<h4 class="book-title"><area class="area" href="/book/1003477570" target="_blank">都市獵人 </h4> .book-title {position:relative; } .book-title > .area {position: absolute;left: 0; top: 0;width: 100%; height: 100%; }

脫離<map>裸露的<area>元素實際上也是可以點擊跳轉了，就像一個<a>鏈接元素一樣，但是<area>元素不支持子元素，所以只能覆蓋。但是，卻支持偽元素，也就是，如果單看視覺表現，你也可以讓標題文字借助:before等偽元素實現。

然而，雖然主觀功能都OK了，代碼也很精煉，但是，這種直接使用<area>元素覆蓋的方法還有一些局限，一是Firefox瀏覽器不支持（Firefox的<area>元素默認display:none，且無法重置）；另外一個問題就是無法使用鍵盤Tab索引訪問，如果沒有外面的<a>元素是可以的，有了之后，這種取巧的做法就不行了。

所以，如果你的項目兼容性要求比較高，對無障礙訪問要求也比較高，則建議使用透明圖片覆蓋的方式實現文字的鏈接嵌套，CSS不變，只要HTML稍微調整下就可以了，如下：

也就是把原本裸露的<area>換成<img>，然后再使用<area>元素創建圖片熱點。于是，各大瀏覽器全兼容版本就這么大功告成了！

三、結束語

對于Chrome以及IE9+瀏覽器可以對<area>元素進行樣式設置，而Firefox4之后就不可以，我查找網上資料，發現有人認為Firefox瀏覽器的做法是正確的，包括10年就有人向Mozilla反饋這個bug，但是，似乎Mozilla開發者堅持認為自己是正確的，也就是Firefox瀏覽器的<area>永遠都是display:none。

總結

以上是生活随笔為你收集整理的HTML areamap标签及在实际开发中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。