Html 如何使图像的一部分成为可点击的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18560097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a section of an image a clickable link
提问by Vikram
I have a banner on web page, and part of the image there is a graphic of a button box. How do I make just the part where the button is a clickable link such as a href? You can see a sample image below.
我在网页上有一个横幅，图像的一部分有一个按钮框的图形。我如何制作按钮是可点击链接（如href）的部分？您可以在下面看到示例图像。
In the banner image there is a "Join Now, Its Free" Button graphic. I want to add a link on this box, so when users click on this box on the banner, then it will open the next page. I want to know how I can add a link on just this button. I don't want to add the <button>tag to it; I just want to add a link based on the area of the "Join Now, Its Free" Button graphic. Anybody have any ideas on how I can add a link on this part of the image area without using the <button>tag.
在横幅图像中有一个“立即加入，免费”按钮图形。我想在这个框上添加一个链接，所以当用户点击横幅上的这个框时，它会打开下一页。我想知道如何仅在此按钮上添加链接。我不想<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>
Thank You
谢谢你
回答by Burn_E99
If you don't want to make the button a separate image, you can use the <area>tag. This is done by using html similar to this:
如果您不想使按钮成为单独的图像，则可以使用<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>
Note 1: The coords=" "attribute must be formatted in this way: coords="x1,y1,x2,y2"where:
注 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
Note 2: The usemap="#mapname"attribute must include the #.
注 2：该usemap="#mapname"属性必须包含#.
EDIT:
编辑：
I looked at your code and added in the <map>and <area>tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.
我查看了您的代码，<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> -->
Notes:
笔记：
- The
coord="48,341,294,275"is in reference to your screenshot you posted. - The
src="./test.png"is the location and name of the screenshot you posted on my computer. - The
href="http://www.example.com/"is an example link.
- 这
coord="48,341,294,275"是参考您发布的屏幕截图。 - 这
src="./test.png"是您在我的计算机上发布的屏幕截图的位置和名称。 - 这
href="http://www.example.com/"是一个示例链接。
回答by Michael B.
by creating an absolute-positioned link inside relative-positioned div.. You need set the link width & height as button dimensions, and left&top coordinates for the left-top corner of button within the wrapping div.
通过在相对定位的 div 内创建一个绝对定位的链接。您需要将链接宽度和高度设置为按钮尺寸，以及环绕 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>
回答by Ishan Patel
You can auto generate Image map from this website for selected area of image. https://www.image-map.net/
您可以从此网站为选定的图像区域自动生成图像地图。https://www.image-map.net/
Easiest way to execute!
最简单的执行方法！
回答by user13034686
The easiest way is to make the "button image" as a separate image. Then place it over the main image (using "style="position: absolute;". Assign the URL link to "button image". and smile :)
最简单的方法是将“按钮图像”作为单独的图像。然后将它放在主图像上（使用“style =“position：absolute;”。将URL链接分配给“button image”。然后微笑：）
