インタラクティブな要素のグリッドを作成するには？

Question

は私が... this、あなたがそれらにカーソルを合わせると変化する画像のフルページのグリッドに似ているポートフォリオのウェブサイトを作成する（another example, the third screen!）

をしようとしている。現在、私は見え粗溶液を持っています以下のような：

<img src="1.png" id="img" swap="2.png"/> 

// then in JS... 

$("#img").hover(function(){ 
    var _this = $(this); 
    var current = _this.attr("src"); 
    var swap = _this.attr("swap"); 
    _this.attr('src',swap).attr('swap',current); 
}); // 

code credit

しかし、これは非常にスケーラブルソリューションと1000枚の画像、srcは切り替えることができるように識別され、独自のユニークなIDを持つそれぞれを持つ以外にはありませんが、私はないんだけど何をすべきか - と私はこれがどのように異なった表示サイズ/スクリーンカットオフに反応するのかわかりません。 CSSのタイルの背景画像はうまくいきますが、対話性は許されません... JSスクリプトのカーソル位置（？）を持っていない場合は

!!これは私の最初のプロジェクトです。何か助けていただければ幸いです:)（教室は非常に保護された学習環境です。）

Answer 1

idsを使用せずにすべての画像に対してハンドラを作成する必要はありません。

$("img").hover(function(){ 
    var _this = $(this); 
    var current = _this.attr("src"); 
    var swap = _this.attr("swap"); 
    _this.attr('src',swap).attr('swap',current); 
}); 

と、これは、すべての画像にページがロードされた後に追加しても画像に反応します：画面を説明するために

$(document).on('hover', 'img', function() { 
    var _this = $(this); 
    var current = _this.attr("src"); 
    var swap = _this.attr("swap"); 
    _this.attr('src',swap).attr('swap',current); 
}); 

を

これは、現在のページ上のすべての画像に適用されますサイズやその他の問題がある場合は、画像に一定の幅と高さを設定するか、すべての画像の解像度が同じであることを確認する必要があります。

divのグリッドを作成し、上記のハンドラと同様に、ホバー上のdivの背景を変更することで、これをバックグラウンドで行うこともできます。