画像変化は

Question

私は今1 See this image

に4枚の画像を持っているために作成されたイメージを持って、私は何をしようとしていることは一番上にちょうど最初の正方形をロードするためにCSSを取得することです。ユーザーがその画像の上を移動すると、4つの画像すべてが切り替わります。

読み込み時に黒く表示され、ユーザーがその上に置かれると、イメージは赤、次に青、緑、そして黒に戻ります。マウスが画像領域から離れるまで何度も何度も繰り返します。

私はpngをgifに変換することでこれを行うことができますが、画像はコントロール外で生成されるので、この方法が必要です。 誰かが助けることができれば、私は永遠に感謝します。

乾杯。

Answer 1

あなたは

、すべての定義された間隔時間を CSS spritesを使用する必要があり、変更が位置を変更するために使用したsetInterval機能上のとき起こっ作るために（ここでは、あなたのイメージmesures 300ピクセルの各ブロックの高さを、私たちは300でincerement）

私は.hover() jquery関数を使ってアノテーションを設定し、クリアしました。

var interval; 
 
$(function(){ 
 
    $("#image").hover( 
 
     function() { 
 
     var bottom = 0; 
 
     $this = $(this); 
 
     interval = setInterval(function() { 
 
      
 
      bottom >= 900 ? bottom = 0 : bottom+=300; 
 
      
 
      $this.css({'background-position' : '0px -'+bottom+'px'}); 
 
     } , 1000) 
 
     
 
     }, 
 
     function(){ 
 
     $this.css({'background-position' : '0 0'}) 
 
     clearInterval(interval); 
 
     } 
 
); 
 
});

#image { 
 
    width:150px; 
 
    height:150px; 
 
    background: url('https://i.stack.imgur.com/h8h14.png') 0 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image" ><div>