Problême de MouseOver Jquery
yvermeulen
-
avion-f16 Messages postés 20367 Statut Contributeur -
avion-f16 Messages postés 20367 Statut Contributeur -
Bonjour,
J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :
et HTML :
#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
J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :
$("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 :
<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
5 réponses
Salut.
Je ne suis pas sûr d'avoir bien compris.
Pour le mouseover, tu aimerais lancer le fadeIn à la fin du fadeOut ?
Il suffit de mettre le fadeIn en callback dans le fadeOut.
Exemple :
Je ne suis pas sûr d'avoir bien compris.
Pour le mouseover, tu aimerais lancer le fadeIn à la fin du fadeOut ?
Il suffit de mettre le fadeIn en callback dans le fadeOut.
Exemple :
$("li #base").mouseover(function () {
$("li #base").fadeOut(1000, function() {
$("li #hov").fadeIn(100);
});
});
Bonsoir,
Merci pour votre réponse.
Je vais tenter d'être plus clair :
1° - J'ai une image A, affiché par defaut,
superposée à une image B caché par défaut.
2° - On MouseOver sur l'image A, l'image A fadeOut
- On MouseOver sur l'image A, l'image B fadeIn
3° - On MouseOut sur l'image B (puisque l'image A n'est plus là) , l'image B fadeOut
- On MouseOut sur l'image B, l'image A fadeIn
Sachant que la structure c'est ça :
VOilou :/ =)
Merci pour votre réponse.
Je vais tenter d'être plus clair :
1° - J'ai une image A, affiché par defaut,
superposée à une image B caché par défaut.
2° - On MouseOver sur l'image A, l'image A fadeOut
- On MouseOver sur l'image A, l'image B fadeIn
3° - On MouseOut sur l'image B (puisque l'image A n'est plus là) , l'image B fadeOut
- On MouseOut sur l'image B, l'image A fadeIn
Sachant que la structure c'est ça :
<li> <div avec background image A></div> <div avec background image B></div> <img avec lien> </li>
VOilou :/ =)
Hello,
Merci de vouloir m'aider.
J'ai testé le code que tu m'as donné.
Le truc c'est que faudrait que ça fasse exactement comme là :
http://www.yoann-vermeulen.com/test.html
mais vignette par vignette
Je me suis dit aprés coup que c'etait parce que je faisait ça avec des id (normalement les id sont unique) donc j'ai remplacé par des class mais c'est la même chose.
Merci de vouloir m'aider.
J'ai testé le code que tu m'as donné.
Le truc c'est que faudrait que ça fasse exactement comme là :
http://www.yoann-vermeulen.com/test.html
mais vignette par vignette
Je me suis dit aprés coup que c'etait parce que je faisait ça avec des id (normalement les id sont unique) donc j'ai remplacé par des class mais c'est la même chose.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question