我在网页上有一个横幅,部分图像上有一个按钮框的图形。如何只使用按钮是可点击链接的部分,例如href?您可以在下面看到示例图片。
在横幅图片中有一个“立即加入,它是免费的”按钮图形。我想在此框中添加一个链接,因此当用户点击横幅上的此框时,它将打开下一页。我想知道如何在这个按钮上添加一个链接。我不想在其中添加<button>
标记;我只想添加一个基于“立即加入,免费”按钮图形区域的链接。任何人都对如何在不使用<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>
谢谢
答案 0 :(得分:43)
如果您不想将该按钮设为单独的图像,则可以使用<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,341,294,275"
参考您发布的屏幕截图。src="./test.png"
是您在我的计算机上发布的屏幕截图的位置和名称。href="http://www.example.com/"
是一个示例链接。答案 1 :(得分:7)
通过在相对定位的div内创建一个绝对定位的链接.. 您需要设置链接宽度&amp;高度为按钮尺寸,左侧和顶部坐标为包装div内按钮的左上角。
<div style="position:relative">
<img src="" width="??" height="??" />
<a href="#" style="display:block; width:247px; height:66px; position:absolute; left: 48px; top: 275px;"></a>
</div>
答案 2 :(得分:1)
您可以从该网站为选定的图像区域自动生成图像地图。 https://www.image-map.net/
最简单的执行方式!
答案 3 :(得分:0)
最简单的方法是将“按钮图像”制作为单独的图像。 然后将其放在主图像上(使用“ style =” position:absolute;“。 将URL链接分配给“按钮图像”。 和微笑:)