css中map標籤

圖像的影像地圖超連接，<map>標籤淺談 

在HTML中還能夠把圖片劃分紅多個熱點區域，每個熱點域連接到不一樣網頁的資源。這種效果的實質是把一幅圖片劃分爲不一樣的熱點區域，再讓不一樣的區域進行超連接。這就是影像地圖。要完成地圖區域超連接要用到三種標籤：<img><map><area>下面分別介紹這些標籤的用法： 

   影像地圖（Image Map）標籤的使用格式： 

    <img src="圖形文件名" usemap="#圖的名稱"> 
      <!-- 插入圖片時要在<img>標記中設置參數usemap="#圖的名稱" ismap，以表示對圖像地圖（圖的名稱）的引用；--> 
    <map name="圖的名稱"> 
     <!--用<map>標記設定圖像地圖的做用區域，並用name屬性爲圖像起一個名字--> 
     <area shape=形狀 coords=區域座標列表 href="URL資源地址"> 
     ......可根據須要定義多少個熱點區域 
     <area shape=形狀 coords=區域座標列表 href="URL資源地址"> 
    </map> 
【1】shape -- 定義熱點形狀 
         shape=rect： 矩形 
         shape=circle：圓形 
         shape=poly： 多邊形 

【2】coords -- 定義區域點的座標 
    a.矩形：必須使用四個數字，前兩個數字爲左上角座標，後兩個數字爲右下角座標 
        例：<area shape=rect coords=100,50,200,75 href="URL"> 
    b.圓形：必須使用三個數字，前兩個數字爲圓心的座標，最後一個數字爲半徑長度 
        例：<area shape=circle coords=85,155,30 href="URL"> 
    c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入 
        例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"> 

在製做本文介紹的效果時應注意的幾點： 
　　 一、在<img>標記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>標記中的name參數值相同，也就是說，「圖像地圖名稱」要一致； 
　　 二、同一「圖像地圖」中的全部熱點區域都要在圖像地圖的範圍內，即全部<area>標記均要在<map>與</map>之間； 
　　 三、在<area>標記中的 cords 參數設定的座標格式要與shape參數設定的做用區域形狀配套，避免出如今shape參數設置的矩形做用區域，而在cords 中設置的倒是多邊形區域頂點座標的現象出現。