Remote Hover – Tutorial II

Remote Hover – Tutorial II

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 :P

$(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!

4 Comentarii

Ronin a scris

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’); }); }) })

ionutz a scris

ceva de genul, dar poți scurta foarte mult astfel:

$(document).ready(function(){
	$('#rollover a').hover(function(){
		imagineNoua = $(this).attr('rel');
		imagineVeche = $(this).attr('src');
		$('#remoteRollover img').fadeOut('slow', function(){
		$(this).attr({
		rel:	imagineVeche,
		src: imagineNoua
		});
		$(this).fadeIn('slow');
		});
	},function(){
		imagineNoua = $(this).attr('rel');
		imagineVeche = $(this).attr('src');
		$('#remoteRollover img').fadeOut('slow', function(){
		$(this).attr({
		rel: imagineVeche,
		src: imagineNoua
		});
		$(this).fadeIn('slow');
		});
	});
});

nu am testat, dar ar trebui să meargă :)

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter