javascript 用html页面上的按钮覆盖图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15450558/
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
overlaying an image with a button on html page
提问by brendosthoughts
so I have an image which i would like to overlay with an html button attribute like so:
所以我有一个图像，我想用 html 按钮属性覆盖它，如下所示：
here is a blank image
这是一张空白图片
i would like to overlay a button like so on the image
我想在图像上覆盖一个像这样的按钮
and then if the button is clicked have it then look like this
然后如果按钮被点击，然后看起来像这样
from what i can gather this could be done using CSS using {index-z} somehow, or possible with html5 canvas tag. and then to handle the actually button click with java script. However i am not completely sure how to accomplish this (the handling of button click with javascript i do know). Could someone link to a tutorial on how to do this or give an explanation it would be greatly appreciated.
据我所知，这可以使用 CSS 使用 {index-z} 以某种方式完成，或者可以使用 html5 canvas 标签完成。然后用java脚本处理实际的按钮点击。但是，我不完全确定如何完成此操作（我知道使用 javascript 处理按钮单击）。有人可以链接到有关如何执行此操作的教程或给出解释，将不胜感激。
Note: the image itself is also an href / link if this changes how this should be done, additionally te image itself will be in a sort of gallery with around 50 similar images or so
注意：图像本身也是一个 href / 链接，如果这改变了应该如何完成，另外图像本身将在一个画廊中，大约有 50 张左右的相似图像
回答by scott.korin
You can use positioning to place the "star" button on top of the other image. Your image and button will need to be in a container with the position set to relative. Then you can set your "star" to be absolutely positioned, and that position will be relative to the container:
您可以使用定位将“星号”按钮放置在其他图像的顶部。您的图像和按钮需要位于位置设置为相对的容器中。然后你可以将你的“星星”设置为绝对定位，该位置将相对于容器：
.image-container {
display: inline-block;
position: relative;
}
.star-button {
position: absolute;
right: 10px;
top: 10px;
}
<div class="image-container">
<img src="main image here">
<img class="star-button" src="star image here">
</div>
Then you can handle the click of the image (or button, or a, or what have you) in your javascript.
然后你可以在你的javascript中处理图像（或按钮，或a，或你有什么）的点击。
回答by Joe Razon
Maybe this example will help you my friend:
也许这个例子会帮助你我的朋友：
Source: ye5
来源：ye5
HTML :
<div id="header1" width="259px">
<a href="http://your-website-link"></a>
<img src='http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg' style='margin-left:259px; margin-top:-128px;'/>
CSS :
#header1 a {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:link {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:hover {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:active {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5 templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}
