html淺談之圖像映射

或許做前端到現在你沒有接觸過圖像映射這個東東，但是如果你是一個用過百度大搜尋的同學，它就在你的面前，但是你沒有注意哦。

---------------真相就是百度首頁的中圖其實就用了圖像映射的原理。

1.圖像映射

    ------------帶有可點區域的圖像。

2.html标簽之map和area

•    map标簽

         -------定義一個 用戶端圖像映射

<img src="xx.jpg" usemap="#mp" alt="大圖" />
<map name="mp" id="mp">
    <area></area>
</map>
           

 主要注意以下幾點：

1. 是以主流的浏覽器多支援map
2. img标簽的usemap屬性可引用map中的id或者name屬性（存在浏覽器的差異）----是以為了屏蔽這個，我們應該在map标簽中同時設定id和name屬性
3. 對應doctype設定strict/transitional/frameset的我們必須給map設定id屬性（值是唯一的）

• area标簽

1. 定義圖像映射中的區域
2. 它一般多是嵌套在map标簽中的

<area shape="circle" coords="120,160,10" href="xxx.html" target="_blank" rel="external nofollow"  alt="一部分"/>
           

  屬性說明：

1. alt

        ------------用來在圖檔加載失敗的情況下顯示替換的文本資訊（ 這個屬性一直被很多的人遺忘）

     2.  coords            ------------定義滑鼠可點選的坐标

     3.  shape            ------------定義滑鼠可點選的區域的 形狀（default/rect/circ/poly）

     4.  target

        ------------定義指向的url

     5.  nohref

        ------------排除的某個區域