我在网页上有横幅，部分图片有一个按钮框的图形。如何使按钮成为可点击链接(例如href)的部分？您可以在下面看到一个示例图。
在横幅图片中有一个“Join Now，Its Free”Button图形。我想在这个框中添加一个链接，所以当用户点击横幅上的这个框时，它会打开下一页。我想知道如何在这个按钮上添加一个链接。我不想添加< button>标记它我只想添加一个基于“Join Now，Its Free”按钮图形的区域的链接。任何人都有任何想法，我可以如何在图像区域的这一部分添加链接，而不使用< button>标签。
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right:
-19px; opacity: 1;" class="item"
src="images/slider1.png" data-topimage="7%">
<a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>
</div>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul>
</div>
谢谢
解决方法
如果您不想将按钮设为单独的图像，则可以使用< area>标签。这是通过使用与此类似的html来完成的：
<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="see note 1" href="link" alt="alttext">
</map>
注1：coords =“”属性必须以这种方式进行格式化：coords =“x1，y1，x2，y2”其中：
x1=top left X coordinate y1=top left Y coordinate x2=bottom right X coordinate y2=bottom right Y coordinate
注2：usemap =“#mapname”属性必须包含#。
编辑：
我看了你的代码，并添加到< map>和< area>标签应该在哪里。我也发表了一些与图像重叠的部分或似乎没有用的部分。
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right: -19px; opacity: 1;" class="item" src="./test.png" data-topimage="7%" height="358" width="728" usemap="#imgmap" />
<map name="imgmap">
<area shape="rect" coords="48,341,294,275" href="http://www.example.com/">
</map>
<!--<a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>-->
</div>
</li>
</ul>
</div>
<!-- <ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul> -->
笔记：
> coord =“48,275”是指您发布的截图。> src =“./ test.png”是您在我的电脑上发布的截图的位置和名称。> href =“http://www.example.com/”是一个示例链接。
