Fondu Rollover Image Sprite

**MisterSnow** · 09/10/2010, 14h21

Bonjour à tous,

Nouveau venu dans le monde du Javascript et de jQuery, ma question va vous sembler être un grand classique mais malheureusement je n'ai pas trouvé de solution dans les nombreux posts traitant de ce sujet sur la toile...

Alors voilà, ce que j'essaye de faire depuis plusieurs jours c'est un rollover sur une image sprite servant de lien avec un effet fondu entre l'image statique et l'image mouseover... (un grand classique lol)

Voici mon CSS de départ:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.img-sprite{display:block; width:300px; height:300px; background-color:transparent; background-repeat:no-repeat; background-position: 0 0; }
.img-sprite:hover{background-position : 0 -300px; }
#img1{background-image: url(../images/home/image1.jpg); }
#img2{background-image: url(../images/home/image2.jpg); }
#img3{background-image: url(../images/home/image3.jpg); }

Et mon HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a class="img-sprite" id="img1" href="page1.html"></a>
<a class="img-sprite" id="img2" href="page2.html"></a>
<a class="img-sprite" id="img2" href="page3.html"></a>

Comme je le disais j'ai trouvé et essayé plein de solutions trouvées sur le web pour mon effet rollover mais la plupart du temps ce sont des exemples qui se rapportent à un menu avec des <ul> et des <li> etc... dans le CSS et je n'ai pas réussit à l'adapter à mon cas...
J'ai aussi trouvé un effet de rollover sur une image qui marche très bien mais qui utilise 2 images différentes (pas de sprite), qui les superposent et qui joue simplement sur la propriété "opacity" de celle qui est au 1er plan... et pour tout un tas de raisons la non plus je ne peux pas m'en servir de base pour ce que je souhaite réaliser...

Enfin bref, voilà tout.. .
Un grand merci d'avance pour votre aide précieuse,
M.S

**MisterSnow** · 19/10/2010, 09h30

Bon bah j'avance petit à petit mais là je suis vraiment bloqué

Voici mon javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript'>
jQuery(document).ready(function(){
    jQuery(".vignette").hover(
        function() {
            jQuery(this).stop().animate({backgroundPosition: '0 0'}, {duration:500});
        },
        function() {
            jQuery(this).stop().animate({backgroundPosition: '0 -300px'}, {duration:500});
    });
});
</script>

Je pensais que le "duration" allait me permettre d'obtenir un effet de transition en fondu pendant 500ms mais apparemment ça fonctionne plutôt comme un delay.. . :s

Personne pour m'aider ? SVP

**danielhagnoul** · 22/10/2010, 01h10

Bonsoir

Pour obtenir un bon résultat, j'utilise le plug-in d'Alexander Farkas. Exemple avec le code du plug-in inclus, car je n'ai plus le lien de référence

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.5.custom.css">
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#conteneur {
			background-image: url("../images/imageTest.png");
			background-repeat: no-repeat;
			background-position: 500px 280px; /* left top */
		}
	</style>
</head>
<body>
	<h1>Q. &amp; R. Forum jQuery</h1>
	<div id="conteneur">
		<button id="btn">Go</button>
	</div> 
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.5.custom.min.js"></script>
	<script>
		/**
		 * @author Alexander Farkas
		 * v. 1.02
		 */
		(function($) {
			$.extend($.fx.step,{
				backgroundPosition: function(fx) {
					if (fx.state === 0 && typeof fx.end == 'string') {
						var start = $.curCSS(fx.elem,'backgroundPosition');
						start = toArray(start);
						fx.start = [start[0],start[2]];
						var end = toArray(fx.end);
						fx.end = [end[0],end[2]];
						fx.unit = [end[1],end[3]];
					}
					var nowPosX = [];
					nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
					nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
					fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
				   function toArray(strg){
					   strg = strg.replace(/left|top/g,'0px');
					   strg = strg.replace(/right|bottom/g,'100%');
					   strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
					   var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
					   return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
				   }
				}
			});
		})(jQuery);
 
		$(function(){
			$("#btn").click(function(){
				$("#conteneur").animate({"background-position": "(24px 100px)"}, 2000);
			});
		});
 	</script>
</body>  
</html>

Fondu Rollover Image Sprite

jQuery

Discussions similaires

Partager

Partager