1

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

这是一张空白图片 普通图像

我想在图像上叠加一个按钮 我想要什么

然后如果单击按钮，则看起来像这样 单击按钮时的图像

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

注意：图像本身也是一个 href / 链接，如果这改变了应该如何完成，另外图像本身将在一个画廊中，大约有 50 个类似的图像

4

2 回答 2

6

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

.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中处理图像（或按钮，或a，或你有什么）的点击。

JSFiddle

于 2013-03-16T14:57:09.763 回答
1

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

来源：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;
}
于 2013-03-16T15:58:57.043 回答