最近遇到有按钮的图片，并且需要做出点击图片上的按钮能够做到跳转到其他的页面或网址。
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-100%;height:auto;} .box{position:relative;} .button{position:absolute;right: 7.5%;bottom: 35%; 27.7%;}
其中最重要的CSS为.button, 要计算按钮在图片中所占的比例
width=“图片的"width-img"/整张大图的"width-full”"；
right='图片右边距“width-r”/整张大图的"width-full”'；
bottom=‘图片下边距“height-b”/整张大图的"height-full”';
可以实现不论屏幕尺寸多大按钮始终可以点击。