如何使图像的一部分成为可点击的链接
Posted
技术标签:
【中文标题】如何使图像的一部分成为可点击的链接【英文标题】：How to make a section of an image a clickable link 【发布时间】：2013-09-04 18:55:03 【问题描述】：我在网页上有一个横幅，部分图像有一个按钮框的图形。如何只制作按钮是可点击链接的部分，例如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>
谢谢
【问题讨论】：
将其设为单独的<img>。用<a href="...">包裹它。
我知道这是一个横幅，它将在所有横幅上创建超链接
重复问题不会改变我的建议。没有明显的理由认为该按钮图形应该成为图像其余部分的一部分。
【参考方案1】：
最简单的方法是将“按钮图像”制作为单独的图像。 然后将其放在主图像上（使用“style="position: absolute;". 将 URL 链接分配给“按钮图像”。 和微笑:)
【讨论】：
【参考方案2】：您可以从该网站为选定的图像区域自动生成图像地图。 https://www.image-map.net/
最简单的执行方式！
【讨论】：
非常感谢，您为我节省了数小时计算坐标的时间：D 这个工具太棒了【参考方案3】：如果您不想让按钮成为单独的图像，您可以使用<area> 标签。这是通过使用与此类似的 html 来完成的：
<img src="imgsrc" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="see note 1" href="link" >
</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%" 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/" 是一个示例链接。
【讨论】：
我如何检查图像上的位置是否正确我如何检查这个 首先我有一个问题：这个按钮在你图片的左下角吗？ 好的，那么 X1 将等于 0，Y1 将等于 0。现在使用图像编辑器并从左下角到右下角进行测量；这会给你X2。然后从 X2 测量到按钮的右上角；这会给你 Y2。现在将coord 属性放入您的<area> 标记中，如下所示：coord="0,0,X2,Y2"。
要获取地图坐标，请使用此站点 - imagemap-generator.dariodomi.de（与它没有任何关联，只是使用它）
获取圆或多边形坐标，您可以去image-map.net。如果您担心响应能力，请尝试github.com/davidjbradshaw/image-map-resizer（不相关，我只是发现和分享）【参考方案4】：
通过在相对定位的 div 中创建一个绝对定位的链接.. 您需要将链接宽度和高度设置为按钮尺寸，并设置包装 div 内按钮左上角的左上角坐标。
<div style="position:relative">
<img src="" />
<a href="#" style="display:block; width:247px; height:66px; position:absolute; left: 48px; top: 275px;"></a>
</div>
【讨论】：
请检查更新说明那里的链接没有进入框 优秀的答案。这具有 标记上可能发生的所有样式的好处，但不能成为任意 （形状多边形）的缺点。 不错的一个。不过，它似乎不适用于对象 (svg)。 @Christian 它似乎有效，也许将您的代码发布在一个单独的问题中以上是关于如何使图像的一部分成为可点击的链接的主要内容，如果未能解决你的问题，请参考以下文章