我搜索了大约一个小时来找到问题的解决方案,但找不到太多帮助。
我有一个 div,其中将 sprite 图像设置为背景图像,因此在一个 jpg 中,一个图像位于另一个图像之上。当您将鼠标悬停在 div 上时,它会更改 Sprite 图像的位置,以便您看到另一种状态。
我想使用图像映射,这样当您单击背景图像的一部分时,这将改变 sprite 背景图像的定位以显示替代状态。再次点击它会恢复到原来的状态。
我希望这是有道理的,感谢您抽出宝贵时间。
.imageswap {
list-style: none;
height: 495px;
width: 940px;
display: block;
background: url('/HTMLContent/images/frozenpeas_web_sprite3.jpg') 0 0;
}
.imageswap:hover{
background-position: 0 -495px;
}
<div class="ContentBorders imageswap" style="margin:0 auto;">
<div class="textandlogo" style="width: 249px; height: 145px; padding: 0; z-index: 99; float: left;">
<img src="/HTMLContent/images/frozenpeas_logo.png" height="94" width="344" />
<p class="sucktextblack" style="text-align: left; padding: 0 0 0 17px; margin: 0; width: 255px;">
<strong>Make Ice Balls</strong><br />
Ice cubes and a refreshing drink go together like peas in a pod, which is why we bring you the frozen peas ice cube mould! Frozen ice peas home-grown from your own freezer and completely reusable. Perfect for hap-pea occasions or just for vegging out in front of the TV. Easy peasy<br />
<span class="sucksmall" style="text-align: left;" >Design by Alessandro Martorelli</span>
</p>
</div>
<div style="width: 202px; height: 202x; padding:0; margin: 270px 20px 0 0; z-index: 98; float: right;">
<img src="/HTMLContent/images/frozenpeas_circle.png" height="202" width="202" />
最佳答案
这是您要找的吗?
CSS:
.imageswap.active,
.imageswap:hover {
background-position: 0 -495px;
}
jQuery:
$(".imageswap").click(function() {
$(this).toggleClass("active");
});
关于javascript - 使用单击图像映射更改设置为背景的 Sprite 图像的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19635320/