给图片中的按钮设置跳转的两种解决方法

最近遇到有按钮的图片，并且需要做出点击图片上的按钮能够做到跳转到其他的页面或网址。
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”';
可以实现不论屏幕尺寸多大按钮始终可以点击。

　　

 

转载于:https://www.cnblogs.com/cheryshi/p/7656534.html