[解決済み] jQuery、ホバーで画像が変化する [重複]。

質問

さて、PHPで画像を動的に生成しているので、必ずしも同じ画像になるとは限りません。そして、私は過去4時間を費やしてインターネットをスキャンし、jQueryおよび/またはCSSで数え切れないほどのことを試して、私は動作する次のように思い付くました。

    <a href="build.php?x=1875&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1876&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1877&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1878&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1879&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>

Market.pngは背景が透明です。

さて、上記はうまくいきました。マウスオーバーでMarket.pngが表示され、背景が透明な部分はtile_4.jpg、マウスアウトでtile_4.jpgになります。

私が知りたいのは、上記と全く同じことをjQueryやCSSで実現する方法はないのか、ということです。私はそれがわかっていない、と私は試して何時間も費やしてきたが、私は可能であればむしろ他の何かをしたいので、上記（大規模な繰り返しで、上記のフォーマットは、現在約100回繰り返されていますが、私はそれを1000回以上に拡大する予定を持っている）は、帯域幅を占有することになります。

解決するには？

のそれぞれにクラスを追加すればいいのです。 <img /> 要素、例えば 'xyz' (もっと良い名前を選んでください) を使用し、その後に ホバー() という関数があります。画像が動的であることを考慮すると、画像マークアップにデータ属性を追加してレンダリングし、"alternate" または "hover" 画像ソースとして機能させることができます。最終的には、次のようなレンダリングになります。

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

そして、それぞれの画像に対して切り替え機能を適用するために、画像を入れ替える小さな関数を書きます。 src 属性と data-alt-src 属性は、ホバーイン/ホバーアウト時に使用されます。

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

そして、ほんの少しのjQueryのイベントバインディングを使って、関数を直接実行するのと同じくらい簡単です。

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

以下は動作例です（バージョン1）。

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

以下は、そのスピンです。 アンドレス・セパレート の例をコメントで紹介しました。このセレクタを使えば、画像をマーカークラスで装飾する必要がありません。また、代替ソースの画像をあらかじめ読み込んでおくことで、ホバーリング時の遅延やちらつきをなくすことができます。

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 
});

そして、これが2番目のバージョンです。

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />