Remote Hover - Tutorial II

19 Jul

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 

1
2
3
4
5
6
7
8
9
10
11

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

Scris în categoria: Development, Tutoriale

4 Comentarii »

  1. 13 October 2007 Ronin a spus:

    Ok ! merge…si pentru mouseout sa imi puna o anumita imagine sau cea care a fost initiala inaite de face mouseover ? Tks !

  2. 13 October 2007 ionutz a spus:

    adaugi o funcţie mouseout să îţi pună altă imagine. Simplu :P

  3. 13 October 2007 Ronin a spus:

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

  4. 13 October 2007 ionutz a spus:

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

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    $(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ă :)

Lasă un comentariu

Poţi folosi câteva taguri XHTML: <blockquote> <strong> <a> <em>

Pentru a posta secvenţe de cod, foloseşte
<pre lang="php/css/html/javascript"> CODUL TĂU <pre>