Solution en « pure css »
Préparez d’abord une image contenant les 2 états du bouton (off en haut et on en bas). Dans notre exemple, le bouton fait 32px de côté, donc il nous faut une image de 32 x 64 pixels. Pour le principe, on se contente simplement de repositionner l’image de fond.
Placez le code suivant dans le head de votre page html.
.rollover {
height: 32px;
width: 32px;
float: left;
background: url(bouton.png) no-repeat;
}
a.rollover:link {
text-decoration: none;
display: block;
}
a.rollover:hover {
background-position: left bottom;
}
Code html pour afficher le bouton :
<a href="#" class="rollover"></a>
Solution en jQuery avec 2 images
Cette solution nécessite 2 images (le bouton off et le bouton on). Placez le code suivant dans le head de votre page :
$(document).ready(function(){
$(function () {
$('img.echange').hover(function () {
$(this).css("cursor", "pointer");
this.src = 'images/on.png';
}, function () {
this.src = 'images/off.png';
});
});
});
Et pour afficher l’image dans le html :
<p><img src="images/off.png" class="echange" /></p>
Conclusion
Voici 2 méthodes pour effectuer des changements d’images au survol, il en existe sûrement d’autres, n’hésitez pas à utiliser les commentaires pour nous en suggérer d’autres
Salut, juste pour info, le tuto est pas trop complet pour un débutant. Il manque la notion script pour qui ne s’y connait pas. Le jquery entre dans la balise et ensuite . Je bug encore par contre. Ce doit être quelque chose de simple, puisque je trouve pas trop lol
zut, mauvais affichage. balise : head puis script
dsl, c’était entre les
Bonjour,
Je trouve l’astuce de la solution en jQuery avec 2 images vraiment très astucieuse.
Est-il possible de rajouter une vitesse de transition plus lente entre les deux images au rollover ? Si oui comment ?
Merci beaucoup !
Bonjour,
Bien sûr, il faut faire un cross-fade : une image qui disparaît (fadeOut) progressivement tandis que l’autre apparaît (fadeIn) progressivement à la même vitesse.
Voici les lignes à rajouter en jQuery pour le fadeOut :
$(this).fadeOut(slow);
et pour le fadeIn :
$(this).fadeIn(slow);
Merci de ta visite
A bientôt
Merci pour la réponse !
Seulement je n’arrive pas à le faire marcher ! Je ne dois pas bien placer
$(this).fadeOut(slow);
et
$(this).fadeIn(slow);
Est-ce que tu peux m’écrire le code en entier ?
Merci beaucoup !
Bonsoir Camille,
Alors là j’ai rien pour tester mais je pense qu’il faut changer un peu de tactique pour ce que tu veux. Il faut que les 2 images soient l’une au-dessus de l’autre. Et l’état ON a l’opacité à 0.
Quand on survole, il faut changer l’opacité de l’image On avec fadeIn() et quand tu es en mouseout il faut ramener l’opacité à 0 de l’image ON avec fadeOut()
Du coup, pas besoin de cross-fade.
A tester…
A bientôt