在html页面上用按钮覆盖图像

Question

所以我有一个图像，我想用html按钮属性覆盖，如：

这是一张空白图片

我想在图像上叠加一个这样的按钮

然后如果点击按钮，那么它看起来像这样

从我可以收集的内容中，这可以使用CSS使用{index-z}以某种方式完成，或者使用html5 canvas标签。然后使用java脚本处理实际按钮单击。 但是我不完全确定如何实现这一点（用javascript处理按钮点击我知道）。有人可以链接到如何执行此操作的教程或给出解释，将不胜感激。

注意：图像本身也是一个href /链接，如果这改变了应该如何做，另外te图像本身将在一个图库中，大约有50个相似图像左右

Answer 1

您可以使用定位来放置＆＃34; star＆＃34;另一个图像顶部的按钮。您的图像和按钮需要位于容器中，其位置设置为相对。然后你可以设置你的明星＆＃34;绝对定位，该位置将相对于容器：

.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>

然后你可以在你的javascript中处理图片（或按钮，或者你有什么）的点击。

JSFiddle

Answer 2

也许这个例子会帮助我的朋友：

来源：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;
}