Așa cum am promis AICI, iată partea a doua a tutorialului de „remote hover”, de această dată bazată pe jQuery.
Deoarece nu sunt prea multe diferențe între prima variantă și aceasta, folosim aceeași structură ca în prima parte. Singura diferență este… ai ghicit! Partea de javascript
$(document).ready(function(){
$('#rollover a').mouseover(function(){
imagineNoua = $(this).attr('rel');
$('#remoteRollover img').fadeOut('slow', function(){
$(this).attr({
src: imagineNoua
});
$(this).fadeIn('slow');
});
});
});
La fiecare mouseover peste un element Anchor din listă adăugăm un efect de fade out pentru imagine, schimbăm imaginea (de fapt sursa acesteia), și îi punem în schimb calea spre noua imagine. După ce s-au întâmplat toate acestea, noua imagine e pregătită de un fade in. Gata
Așa cum a precizat și Add într-un comentariu, dacă imaginile sunt mari, este nevoie de un preloader pentru acestea. Desigur, asta îți rămâne ca un fel de temă pentru acasă, deoarece important a fost conceptul (simplu, de altfel) ce stă în spatele unui astfel de rollover.
Succes și spor maxim!
Ok ! merge…si pentru mouseout sa imi puna o anumita imagine sau cea care a fost initiala inaite de face mouseover ? Tks !
adaugi o funcție mouseout să îți pună altă imagine. Simplu
ceva de genul asta ?
$(document).ready(function(){
$(‘#rollover a’).mouseover(function(){imagineNoua = $(this).attr(‘rel’);
$(‘#remoteRollover img’).fadeOut(‘fast’, function(){$(this).attr({src: imagineNoua});
$(this).fadeIn(‘fast’); }); }) })
$(document).ready(function(){
$(‘#rollover a’).mouseout(function(){imagineOld = „/cale-imagine.jpg„;
$(‘#remoteRollover img’).fadeOut(‘fast’, function(){$(this).attr({src: imagineOld});
$(this).fadeIn(‘slow’); }); }) })
ceva de genul, dar poți scurta foarte mult astfel:
nu am testat, dar ar trebui să meargă