電商m站的首頁，有一個需求是配一張大的banner圖，然後指定某些區域是熱區，點擊之後跳轉到不同的活動頁。
聽起來簡單明了，實現也比較容易，立刻就想起來有個map標簽，簡直就是為這個需求量身定做。
簡單說下做法：
我們首先會和後臺約定一些規則，定義一個json對象。比如：

{
    type: 1,
    width: 100,
    height: 100,
    clickArea: [
        {
            shape: ‘circle‘,
            coords: ‘10,10,10‘,
            href: ‘//jd.com‘
        },
 

        {
            shape: ‘rect‘,
            coords: ‘10,10,10,10‘,
            href: ‘//m.jd.com‘
        }
    ],
    img: ‘一張圖片.jpg‘
}

我們可以約定，type為1就是map標簽。之後按照我們約定的解析規則，把頁面渲染上去就好了。
當然，實際上不會這麽簡單，一般來說，我們的首頁和活動頁是三端同步的。Android和iOS就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。
這次出問題的地方就在這個map標簽。
我們使用了模板來渲染頁面，之後出來的元素大概是這樣。

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href=
 
"venus.htm" alt="Venus" />
</map>

在chrome中可以正常點擊，一旦到了其他瀏覽器，諸如FireFox，則無法點擊。
同事問到我這個問題的時候，我真是覺得十分有趣，當時一起尋找是哪裏的問題。
中間想了很多種可能，思路一直停留在動態計算影響了map的使用等。但是一直不能復現，後來仔細觀察之後才發現，原來是img標簽在書寫的過程中，漏掉了usemap裏的#。

咳咳咳……
在chrome中好使，是因為chrome幫我們做了兼容。

把這個bug記錄下來，也算是長長記性。

PS：
後來我查了一下，之所以同事會出這個問題，也是因為map標簽用的較少，而常用的label標簽中的for屬性，是不需要加#的，加上了反而會有錯。
當然，label和map中的用法也不同，不論如何，引以為戒。
PPS：
下一篇寫現在工作中用到的首頁活動頁布局方案。
PPPS：
520快樂！

使用Map標簽指定點擊區域時的兼容性問題