Effet de Rollover et fadeIn

Version imprimable

Bonjour,

J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $("li #base").mouseover(function () { $("li #base").fadeOut(1000); }); $("li #base").mouseover(function () { $("li #hov").fadeIn(100); }); $("li #hov").mouseout(function () { $("li #base").fadeIn(100); }); $("li #hov").mouseout(function () { $("li #hov").fadeOut(1000); });
et HTML :
Code:

1 2 3 4 <ul class="vignette"> <li><a href="img/hd/comm-graphiste-magazine-14.png" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-07.jpg" alt="" /></a></li> <li><a href="img/hd/illustration-graphiste-09.jpg" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-25.jpg" alt="" /></a></li> </ul>
#base et #hov sont des div qui contiennent le background qui fond et…défond :)
en dessous la vignette.

Seulement je voudrais que l'effet agisse image par image et pas une image en mouseover = tout en fade (consulter le lien si dessous pour exemple) :
http://www.yoann-vermeulen.com/test.html

DOnc la solution… de débutant que j'ai trouvé serait de donné une classe pour chaqu'une de mes vignettes… et crée un script unique pour chaqu'une de ses vignettes… mais j'imagine qu'il y a une autre solution.

… help !

Merci par avance

16/10/2010, 00h37
danielhagnoul

Bonsoir

Un id doit être unique, il ne doit exister qu'à un seul exemplaire dans toute la page web !
22/10/2010, 19h13
yvermeulen

Rep

Citation:

Envoyé par danielhagnoul

Bonsoir

Un id doit être unique, il ne doit exister qu'à un seul exemplaire dans toute la page web !

Exact ! j'ai rectifié en mettant des classes, mais ça ne fonctionne plus du tout :/

Bonsoir

Si j'ai bien compris votre objectif final, voici un exemple :

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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 */
		// pas de class hover c'est un mot clé !
		div.baseClass, div.hoverClass {
			position:relative;
			width:100px;
			height:100px;
			margin:12px;
		}
		div.baseClass {
			border:2px solid red;
		}
		div.hoverClass {
			border:2px solid green;
		}
	</style>
</head>
<body>
	<h1>Q. &amp; R. Forum jQuery</h1>
	<div id="conteneur">
		<ul>
			<li>
				<a href="#">
					<div class="baseClass">
						<p>Un mot pour remplir</p>
					</div>
					<div class="hoverClass">
						<p>Un mot pour remplir</p>						
					</div>
					<img src="../images/imageTest.png" />
				</a>
			</li>
			<li>
				<a href="#">
					<div class="baseClass">
						<p>Un mot pour remplir</p>
					</div>
					<div class="hoverClass">
						<p>Un mot pour remplir</p>
					</div>
					<img src="../images/imageTest.png" />
				</a>
			</li>
		</ul>
	</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>
		$(function(){
 
$("div.baseClass").mouseenter(function(){
	$(this).fadeOut(1000);
});
 
$("div.baseClass").mouseenter(function(){
	$(this).siblings("div.hoverClass").fadeIn(100);
});
 
$("div.hoverClass").mouseleave(function(){
	$(this).siblings("div.baseClass").fadeIn(100);
});
 
$("div.hoverClass").mouseleave(function(){
	$(this).fadeOut(1000);
});
 
		});
 	</script>
</body>  
</html>