0

我已经搜索了大约一个小时以找到解决问题的方法，但找不到太多帮助。

我有一个将精灵图像设置为背景图像的 div，因此一个图像在单个 jpg 中位于另一个图像之上。当您将鼠标悬停在 div 上时，它会更改精灵图像的位置，以便您看到另一种状态。

我想使用图像映射，以便当您单击背景图像的一部分时，这将改变精灵背景图像的定位以显示替代状态。再次单击它会将其恢复为原始状态。

我希望这是有道理的，并感谢您的时间。

.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" />
4

2 回答 2

0

我认为这就是您需要的：https ://stackoverflow.com/a/14567489/2645724

为了帮助在图像顶部放置链接，请参考： http: //www.neopets.com/~Kacizilla

希望这可以帮助。

于 2013-10-28T14:08:47.097 回答
0

这是你想要的？

CSS：

.imageswap.active,
.imageswap:hover {
    background-position: 0 -495px;
}

jQuery：

$(".imageswap").click(function() {
    $(this).toggleClass("active");
});
于 2013-10-28T13:06:23.383 回答