html點擊圖片某區域進行操作

html開發中可能會需要用到點擊一張圖片的某區域進行跳轉操作。例子如下：

 

<img   src= "../Images/img.gif "   width= "777 "   height= "100 "   border= "0 "   usemap= "#Map ">

<map   name= "Map ">

    <area   shape= "rect "   coords= "600,1,700,40 "   href= "../../a.html ">
    <area   shape= "rect "   coords= "x1,y1,x2,y2 "   href= "../../b.html ">
</map>
 

 

shape="rect"，屬性表示：矩形區域（還有圓形和多邊形具體可以查w3c）；

coords="x1,y1,x2,y2"，屬性表示：（x1,y1）矩形爲左上角頂點座標，（x2,y2）爲對角頂點。

 

點擊圖片的某區域，可以增加一些操作，如轉跳到另一個頁面，在href中填入需要跳轉的頁面即可。

 

shape屬性其它值如下表：

 

值	描述
default	規定全部區域。
rect	定義矩形區域。
circle	定義圓形。
poly	定義多邊形區域。