最近遇到有按鈕的圖片，並且需要做出點擊圖片上的按鈕能夠做到跳轉到其他的頁面或網址。
1. 在網上搜了搜，找到html有一個map標簽可以實現
<img src="GCM.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="rect" coords="507,87,713,141" href ="http://www.baidu.com" alt="Sun" /> </map>
shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小。其基本用法如下：
- <area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀為矩形，左上角頂點坐標為（X1,y1），右下角頂點坐標為（X2,y2）。
- <area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀為圓形，圓心坐標為（X1,y1），半徑為r。
- <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀為多邊形，各頂點坐標依次為（X1,y1）、（X2,y2）、（x3,y3） ......。
2.也可以用CSS實現
把圖片中的按鈕單獨切出來，並用CSS中的position定位方法去寫
<div class="box"> <div class="img"> <img src="bg.jpg"></div> </div> <div class="button"> <a href="#"><img src="botton.png" alt="botton"/></a> </div> </div> /** css style **/
img{max-width:100%;height:auto;} .box{position:relative;} .button{position:absolute;right: 7.5%;bottom: 35%;width: 27.7%;}
其中最重要的CSS為.button, 要計算按鈕在圖片中所占的比例
width=“圖片的"width-img"/整張大圖的"width-full”"；
right='圖片右邊距“width-r”/整張大圖的"width-full”'；
bottom=‘圖片下邊距“height-b”/整張大圖的"height-full”';
可以實現不論屏幕尺寸多大按鈕始終可以點擊。