使用點擊圖像映射來更改設置爲背景的精靈圖像的位置

我已經搜索了大約一個小時以找到解決問題的方法，但找不到太多幫助。使用點擊圖像映射來更改設置爲背景的精靈圖像的位置

我有一個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" />

來源

2013-10-28 mattdbryce

這是你在找什麼？

CSS：

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

的jQuery：

$(".imageswap").click(function() { 
    $(this).toggleClass("active"); 
});

來源

2013-10-28 13:06:23

我覺得這是你所需要的：https://stackoverflow.com/a/14567489/2645724

爲了幫助在圖像的頂部位置鏈接，引用此：http://www.neopets.com/~Kacizilla

希望這會有所幫助。

來源

2013-10-28 14:08:47

使用點擊圖像映射來更改設置爲背景的精靈圖像的位置

回答

相關問題