HTML <area><map>標簽及在實際開發中的應用
之前,我一直以為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:
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 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:
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>
在鏈接嵌套功能上更有價值皆可安好!
HTML <area><map>標簽及在實際開發中的應用