當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2025/4/16 HTML 33 豆豆

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

HTML <area><map>標(biāo)簽及在實(shí)際開(kāi)發(fā)中的應(yīng)用

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

之前，我一直以為HTML?<area>是一個(gè)雞肋HTML，估計(jì)到了HTML5時(shí)代會(huì)被廢棄的命。但是，最近一查資料，乖乖了個(gè)咚，不僅沒(méi)被廢棄，反而發(fā)展了，新增了一些標(biāo)簽屬性，例如rel，media，hreflang等。

然后進(jìn)一步研究發(fā)現(xiàn)，尼瑪這貨居然還可以用來(lái)解決一個(gè)困擾我很多年的棘手問(wèn)題，形象立馬高大上了起來(lái)。

一、HTML <area>原本作用

HTML?<area>原本作用是給<img>圖像標(biāo)記熱點(diǎn)區(qū)域用的。例如一張中國(guó)省份地圖，點(diǎn)擊對(duì)應(yīng)省份顯示對(duì)應(yīng)省份介紹的頁(yè)面；又或者旭旭影院或者旭旭餐廳的座位平面圖，點(diǎn)擊對(duì)應(yīng)座位選座，都是可以使用<area>標(biāo)簽的。

言語(yǔ)蒼白，實(shí)例說(shuō)話(huà)，您可以狠狠地點(diǎn)擊這里：HTML <area>基本使用demo

HTML代碼如下：

此時(shí)圖片上就有3個(gè)熱區(qū)，我們使用Tab鍵索引高亮就可以窺見(jiàn)其輪廓范圍，如下圖片3連擊：

圖片和熱點(diǎn)區(qū)域元素關(guān)聯(lián)是使用圖片的usemap屬性，其值對(duì)應(yīng)<map>的id或者name值（Chrome瀏覽器只支持name屬性值關(guān)聯(lián)）。

這里出現(xiàn)了兩個(gè)HTML標(biāo)簽，一個(gè)是<area>還有一個(gè)是<map>，這些都是從很早就支持的HTML標(biāo)簽，所以不必?fù)?dān)心兼容性問(wèn)題。其中就閉合特性來(lái)看，<area>類(lèi)似<img>，是無(wú)法有子元素或其他子內(nèi)容的。

這里出現(xiàn)了幾個(gè)屬性：

shape

shape表示點(diǎn)擊熱點(diǎn)區(qū)域的形狀，支持矩形rect，圓形circle以及多邊形poly。

coords

coords表示點(diǎn)擊熱點(diǎn)區(qū)域形狀的坐標(biāo)。坐標(biāo)點(diǎn)0,0表示圖片的左上角。其中矩形rect支持4個(gè)數(shù)值，2個(gè)坐標(biāo)，分別是矩形左上角坐標(biāo)和矩形右下角坐標(biāo)。例如，coords="20,20,80,80"生成的就是一個(gè)左上角坐標(biāo)20,20寬高都是60px的矩形區(qū)域。圓形circle支持3個(gè)數(shù)值，前2個(gè)值為圓心坐標(biāo)，第3個(gè)值為圓的半徑大小。多邊形poly就更簡(jiǎn)單了，每?jī)蓚€(gè)數(shù)值組合表示一個(gè)坐標(biāo)點(diǎn)，依次連線(xiàn)形成的區(qū)域就是最終的熱點(diǎn)區(qū)域。

href

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

alt

alt同<img>元素的alt，表示熱點(diǎn)區(qū)域圖片的描述信息。

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

如果單從<area>原本作用來(lái)講，這應(yīng)該是一個(gè)非常有實(shí)用價(jià)值的屬性，例如，社交站點(diǎn)的圖片往往都會(huì)有人類(lèi)識(shí)別標(biāo)注功能，類(lèi)似這樣：

跟<area>的熱點(diǎn)看上去就是一個(gè)東西，然而，實(shí)際上，我們很少很少使用<area>元素，為什么呢？

因?yàn)閳D片上熱點(diǎn)區(qū)域的樣式根本無(wú)法自定義，除了可以顯示outline輪廓意外，什么邊框背景色都不行，對(duì)area進(jìn)行CSS設(shè)置，也僅僅是改變這個(gè)標(biāo)簽元素本身的樣式，而不是圖片上熱點(diǎn)點(diǎn)擊區(qū)域的樣式。于是，最終，圖片上的標(biāo)注或者熱點(diǎn)，我們常常是使用其他標(biāo)簽，如<div>，或者<a>標(biāo)簽進(jìn)行覆蓋進(jìn)行模擬。

也就是說(shuō)，HTML?<area>只能作用于對(duì)點(diǎn)擊熱點(diǎn)沒(méi)有任何樣式要求的場(chǎng)景。考慮到這種場(chǎng)景使用<a>標(biāo)簽?zāi)M也是可以的，進(jìn)一步壓縮了HTML?<area>的實(shí)用價(jià)值。除非是不規(guī)則的點(diǎn)擊熱點(diǎn)，因?yàn)檫@種不規(guī)則區(qū)域包括IE8這種不支持CSS3的瀏覽器也是支持的，如下圖：

所以，這么多年下來(lái)，從沒(méi)使用過(guò)<area>，也沒(méi)有什么異樣，花兒還是那么香，霧霾還是那么浪。難道，HTML?<area>真的一無(wú)是處，只能在某些罕見(jiàn)場(chǎng)景下才有存在價(jià)值嗎？

如果真是這樣，我也不會(huì)寫(xiě)這篇文章了，實(shí)際上，偶然間，我發(fā)現(xiàn)了關(guān)于<area>一個(gè)隱匿的特性，這個(gè)特性可能會(huì)讓<area>遠(yuǎn)離霧霾，聞到花香。

二、HTML <area>衍生的更有價(jià)值的作用

正如前文提到的，<area>元素可以看出半個(gè)<a>元素，這句話(huà)很關(guān)鍵，換句話(huà)說(shuō)，有時(shí)候，我們可以使用<area>元素代替<a>元素。

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

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

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

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

上圖黃色高亮區(qū)域點(diǎn)擊是去“書(shū)籍詳細(xì)頁(yè)”，而點(diǎn)擊列表其它任意區(qū)域是去“書(shū)籍閱讀頁(yè)”，請(qǐng)問(wèn)該當(dāng)如何實(shí)現(xiàn)？

傳統(tǒng)方法，比較好是改變視覺(jué)DOM結(jié)構(gòu)和順序，使鏈接內(nèi)容變成相鄰關(guān)系，再通過(guò)CSS重新布局定位，雖然麻煩了點(diǎn)，但至少語(yǔ)義和無(wú)障礙訪(fǎng)問(wèn)這一塊還是很好的；比較次的方法是使用JS，點(diǎn)擊目標(biāo)區(qū)域preventDefault阻止默認(rèn)事件，然后再location.href跳轉(zhuǎn)之類(lèi)。

實(shí)際上，還有一種更好的做法，就是<a>元素中嵌套<area>元素，可以保證DOM結(jié)構(gòu)符合視覺(jué)呈現(xiàn)，又無(wú)需JS輔助。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：借助area元素實(shí)現(xiàn)的鏈接嵌套demo

demo截圖如下：

在Chrome和IE9+瀏覽器下，點(diǎn)擊圖片以及標(biāo)題會(huì)跳轉(zhuǎn)到“書(shū)籍詳情頁(yè)”，而點(diǎn)擊其他區(qū)域就會(huì)跳到“書(shū)籍閱讀頁(yè)”，鏈接嵌套功能就這么實(shí)現(xiàn)了。

其中，demo中，圖片的鏈接嵌套和標(biāo)題文字的實(shí)現(xiàn)原理有所不同。

圖片的鏈接嵌套用法更加規(guī)范，也就是借助<map>和<area>元素在圖片上創(chuàng)造點(diǎn)擊熱點(diǎn)，相關(guān)HTML代碼如下：

也就是把整個(gè)圖片區(qū)域都作為點(diǎn)擊熱點(diǎn)，充分發(fā)揮了<area>標(biāo)簽本身的特性，沒(méi)有任何兼容性問(wèn)題，鍵盤(pán)訪(fǎng)問(wèn)等都非常良好，又滿(mǎn)足我們鏈接嵌套功能，<area>元素的實(shí)用價(jià)值大大地得以體現(xiàn)。

對(duì)于標(biāo)題文字 “都市獵人”的鏈接內(nèi)嵌處理則要麻煩一些。demo實(shí)例頁(yè)面的做法是，在文字前面直接放置了一個(gè)裸的<area>元素，通過(guò)CSS設(shè)置覆蓋文字實(shí)現(xiàn)的，相關(guān)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>元素實(shí)際上也是可以點(diǎn)擊跳轉(zhuǎn)了，就像一個(gè)<a>鏈接元素一樣，但是<area>元素不支持子元素，所以只能覆蓋。但是，卻支持偽元素，也就是，如果單看視覺(jué)表現(xiàn)，你也可以讓標(biāo)題文字借助:before等偽元素實(shí)現(xiàn)。

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

所以，如果你的項(xiàng)目兼容性要求比較高，對(duì)無(wú)障礙訪(fǎng)問(wèn)要求也比較高，則建議使用透明圖片覆蓋的方式實(shí)現(xiàn)文字的鏈接嵌套，CSS不變，只要HTML稍微調(diào)整下就可以了，如下：

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

三、結(jié)束語(yǔ)

對(duì)于Chrome以及IE9+瀏覽器可以對(duì)<area>元素進(jìn)行樣式設(shè)置，而Firefox4之后就不可以，我查找網(wǎng)上資料，發(fā)現(xiàn)有人認(rèn)為Firefox瀏覽器的做法是正確的，包括10年就有人向Mozilla反饋這個(gè)bug，但是，似乎Mozilla開(kāi)發(fā)者堅(jiān)持認(rèn)為自己是正確的，也就是Firefox瀏覽器的<area>永遠(yuǎn)都是display:none。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。