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

因此，我有一个图像，我想覆盖一个html按钮属性，如下所示：

这是一张空白图片

我想在图像上覆盖一个这样的按钮

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

据我所知，这可以通过CSS使用{index-z}实现，也可以通过html5画布标签实现。然后用java脚本来处理实际的按钮。 然而，我不完全确定如何实现这一点（我知道用javascript处理按钮点击）。如果有人能链接到一个关于如何做到这一点的教程或给出解释，将不胜感激

---

注意：图像本身也是一个href/link，如果这改变了应该如何操作，那么图像本身将位于一个画廊中，大约有50个类似的图像，您可以使用定位将“星形”按钮放置在另一个图像的顶部。您的图像和按钮需要放在一个容器中，位置设置为“相对”。然后，您可以将“星形”设置为绝对位置，该位置将相对于容器：

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

.image容器{
显示：内联块；
位置：相对位置；
}
.星形按钮{
位置：绝对位置；
右：10px；
顶部：10px；
}

然后，您可以在javascript中处理图像（或按钮、a或您拥有的东西）的点击

---

您可以使用定位将“星形”按钮放置在另一幅图像的顶部。您的图像和按钮需要放在一个容器中，位置设置为“相对”。然后，您可以将“星形”设置为绝对位置，该位置将相对于容器：

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

.image容器{
显示：内联块；
位置：相对位置；
}
.星形按钮{
位置：绝对位置；
右：10px；
顶部：10px；
}

然后，您可以在javascript中处理图像（或按钮、a或您拥有的东西）的点击

---

也许这个例子可以帮助你，我的朋友：

资料来源：

---

也许这个例子可以帮助你，我的朋友：

资料来源：

---

您希望按钮图像为gif或png，这样背景可以是透明的，顺便说一下：）您还需要包括单击时显示的图像，将其放置在同一位置，并使用z-index显示未点击的版本或点击的版本。感谢scott，这正是我所寻找的，希望我现在能找到如何将其添加到我的页面中！非常感谢！您希望按钮图像为gif或png，这样背景可以是透明的，顺便说一下：）您还需要包括单击时显示的图像，将其放置在同一位置，并使用z-index显示未点击的版本或点击的版本。感谢scott，这正是我所寻找的，希望我现在能找到如何将其添加到我的页面中！非常感谢！

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;
}