Etkileşimli öğeler ızgarası nasıl oluşturulur?

Question

Ben ... this, onlarla üzerine geldiğinizde değiştirmek görüntülerin tam sayfa ızgara benzer bir portföy web sitesi oluşturmak için (another example, the third screen!)

çalışıyorum Ve şu anda ben görünen bir ham çözüme sahip gibi:

<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

Ama bu 1000 görüntüleri olan daha çok ölçeklenebilir çözüm ve diğer değil, src açılabilinir böylece tespit edildiği kendi benzersiz kimliği ile her, ben değilimNe yapmalı - plus Bunun farklı ekran boyutları/ekran kesme değerlerine nasıl tepki vereceğini bilmiyorum. Ve CSS'de arka plan görüntüsü güzel bir şekilde etkileşirken, etkileşime izin vermez ... belki de bir JS komut dosyası imleç konumu (?)

! Bu benim ilk projemdir, herhangi bir yardım takdir edilecektir :) (Codecademy çok korunaklı bir öğrenme ortamıdır ........)

Answer 1

Her görüntü için ids kullanmak ve bir işleyici oluşturmak zorunda değilsiniz .

bu ANDA sayfadaki her görüntüye geçerli olacaktır:

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

ve bunu her görüntüye tepki vereceği, sayfadan sonra eklenen hatta görüntüleri yüklenir:

$(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); 
}); 

ekran için hesaba katmak boyutları ve diğer endişeleriniz, resimlerinizde sabit bir genişlik ve yükseklik ayarlamanız veya tüm resimlerinizin benzer çözünürlükte olduğundan emin olmanız gerekir.

Bunu, arka planlarla birlikte, bir kılavuz ızgarası oluşturarak ve daha sonra yukarıdaki işleyicilere benzer şekilde, vurgunun arka planını değiştirerek de yapabilirsiniz.