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

標籤：研究   blank   省份   lang   點擊   識別   log   時代   html   

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

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

一、HTML <area>原本作用

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

言語蒼白，執行個體說話，您可以狠狠地點擊這裡：HTML <area>基本使用demo

HTML代碼如下：

<img src="mm1.jpg" alt="美女" usemap="#MM"><map id="MM" name="MM">    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">    <area shape="circle" coords="200,50,50" href="#circle" alt="圓形">    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多邊形"></map>

此時圖片上就有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>不支援嵌套。例如：

<a href="#1">11111111111<a href="#2">22222222222</a></a>

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

所以，如果我們有連結嵌套的需求，就可以試試使用<area>元素，舉個例子，如標註：

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

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

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

眼見為實，您可以狠狠地點擊這裡：藉助area元素實現的連結嵌套demo

demo如下：

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

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

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

<img src="book.jpg" alt="都市獵人 限時免費" usemap="#bookCover"><map id="bookCover" name="bookCover">    <area shape="rect" coords="0,0,54,72" href="book/1003477570" alt="都市獵人 限時免費" target="_blank"></map>

也就是把整個圖片地區都作為點擊熱點，充分發揮了<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稍微調整下就可以了，如下：

<h4 class="book-title">    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="area" usemap="#mapTitle">    都市獵人</h4><map id="mapTitle" name="mapTitle">    <area shape="rect" coords="0,0,200,21" href="/book/1003477570" target="_blank"></map>

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

三、結束語

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

下面就是佐證Firefox瀏覽器的做法是正確的相關內容，引用了大量規範內容：

OK, so let’s walk through the specs here. https://drafts.csswg.org/cssom-view/#dom-element-getclientrects says: If the element on which it was invoked does not have an associated layout box return an empty sequence and stop this algorithm. where “layout box” links to https://drafts.csswg.org/cssom-view/#layout-box which says that a “layout box” is either a CSS layout box or an SVG box. https://drafts.csswg.org/cssom-view/#css-layout-box then says that this is the same term the CSS specs use. Going to the HTML spec, https://html.spec.whatwg.org/multipage/embedded-content.html#the-area-element doesn’t seem to say anything useful on its own (which is not surprising; rendering is described elsewhere in HTML). https://html.spec.whatwg.org/multipage/embedded-content.html#image-maps describes association of <area> elements with layered shapes on an image, which are not “CSS layout boxes” (not least because they’re not actually box-like in any way; they can have pretty arbitrary shapes). There’s no SVG involved here, of course. OK, on to https://html.spec.whatwg.org/multipage/rendering.html which is where HTML describes rendering. This says, in https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements: area { display: none; } (the actual selector includes other things). Great, that’s something to work with. https://www.w3.org/TR/CSS21/visuren.html#display-prop says: none … Please note that a display of ‘none’ does not create an invisible box; it creates no box at all. The current css-display draft at https://drafts.csswg.org/css-display/#valdef-display-none likewise says: The element and its descendants generates no boxes. So as far as I can tell the Firefox behavior is exactly following the specs here: <area> elements have no layout boxes, and hence getClientRects returns an empty list.

孰對孰錯其實沒多大意義，我等只要知道除了地區熱點，<area>在連結嵌套功能上更有價值皆可安好！

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