Je veux que mon logo principal change lorsque l'on passe la souris dessus.
Je crois savoir qu'il existe plusieurs façons d'y parvenir et je me demandais quelle était la meilleure solution en termes de stabilité, de compatibilité avec les navigateurs, d'efficacité et de facilité d'installation.
Voici quelques moyens que j'ai trouvés :
D'autres ? Qu'est-ce qui est le mieux ?
Pour des images riches en contenu, vous devez disposer de l'élément suivant src dans le balisage HTML. Vous voulez utiliser la solution Javascript et placer l'image du rollover dans un attribut.
Pour les éléments d'interface utilisateur sans contenu, en particulier ceux qui sont communs à l'ensemble du site ou dupliqués, une solution CSS directe serait la meilleure (afin de ne pas avoir à redéclarer l'emplacement des images à chaque invocation). Parmi les solutions CSS, les sprites sont les meilleurs car ils ne nécessitent pas de préchargement.
HTML :
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />Dans jQuery :
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});Exemple de mise en œuvre : http://jsfiddle.net/dtPRM/1/
Avantages : C'est facile, c'est logique et cela fonctionne avec un balisage supplémentaire minimal une fois que votre bibliothèque est configurée.
Inconvénients : Nécessite Javascript et le chargement de la bibliothèque jQuery.
C'est probablement la meilleure option. Si votre utilisateur utilise un navigateur où les rollovers sont pertinents (ce qui est probablement le cas), il dispose des capacités Javascript pour exécuter cette option. Les personnes qui ont intentionnellement désactivé Javascript pour une raison ou une autre s'en apercevront si vous laissez un petit message d'erreur dans le champ <noscript> note disant qu'ils n'obtiendront peut-être pas l'ensemble des fonctionnalités.
HTML :
<div id="img1" />CSS :
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}Exemple de mise en œuvre : http://jsfiddle.net/dtPRM/5/
Personnellement, je pense que pour les images riches en contenu, c'est une option encore pire que la solution CSS + deux images de fond. Vous séparez le balisage HTML de la valeur sémantique de l'affichage.
Mais si vous utilisez des images sans contenu, comme des éléments d'interface utilisateur, c'est à mon avis la meilleure solution.
Il existe une autre option CSS qui n'implique pas d'images d'arrière-plan (préférable parmi les solutions CSS si vous voulez avoir les balises d'image dans le HTML, comme pour les images sémantiquement significatives).
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>CSS (j'utilise le :not pseudo-sélecteur ici, mais il est assez facile d'éviter de l'utiliser ; je pense aussi que les noms de classe sont sémantiquement inversés) :
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}Exemple de mise en œuvre : http://jsfiddle.net/dtPRM/2/
Avantages : Sémantiquement raisonnable par rapport à la solution CSS précédente qui consiste à placer toutes les informations dans la feuille de style.
Inconvénients : Balises étrangères nécessaires.
Commentaire : Celui-ci peut être préchargé automatiquement, selon que le navigateur le demande ou non.
En résumé : Une solution de rechange décente si l'option (1) n'est pas disponible parce que vous avez absolument besoin de la compatibilité avec IE2 ou du support non-JS.
Je ne le mentionne que parce que vous l'avez mentionné dans la question. Je ne l'utiliserais pas.
HTML :
<div id="img1" />CSS :
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}Exemple de mise en œuvre : http://jsfiddle.net/dtPRM/4/
Avantages : Largement compatible ; tout ce que vous devez vraiment prendre en charge, ce sont les images d'arrière-plan et le survol.
Inconvénients : Sémantiquement bizarre de mettre les images dans le CSS et de les centraliser là. Cela rend les modifications futures plus difficiles. Ceci étant dit, si vous avez un scénario qui justifie une image de rollover, il y a de fortes chances qu'il s'agisse d'une image sans contenu (par exemple, un élément d'interface utilisateur), auquel cas CSS serait sémantiquement (peut-être) encore plus adapté qu'une image ordinaire. Voir la note sur les sprites ci-dessous.
Autres inconvénients : Vous devrez prendre soin de déclarer la hauteur et la largeur de l'image (une bonne pratique de toute façon, mais qui peut devenir encombrante lorsque vous voulez simplement faire avancer les choses). Les utilisateurs qui consultent le site sur des navigateurs mobiles peuvent traiter les images d'arrière-plan CSS de manière inhabituelle.
Encore plus d'inconvénients : Si vous voulez superposer un préchargeur, vous allez devoir utiliser Javascript et sélectionner d'une manière ou d'une autre les éléments pouvant être survolés, et à ce rythme, vous pouvez aussi bien utiliser Javascript pour tout.
En résumé : Ne l'utilisez pas pour des images riches en contenu. Si vous devez rester à l'écart de Javascript, utilisez des sprites pour les éléments de l'interface utilisateur et la solution alternative pour les images sémantiquement significatives.
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}En utilisant une image comme celle-ci :
Nota: Évitez les remplacements d'images par des JS, car le temps de chargement des images sera court si elles ne sont pas mises en cache auparavant.
J'espère que ça aidera mon frère !
W.
CSS utilisant les arrière-plans et le "hover" (survol)
Utilisez des sprites CSS, en d'autres termes, combinez les deux images en une seule, puis utilisez les CSS. :hover pour décaler l'image.
L'un des avantages de l'utilisation de CSS est qu'il fonctionne même si JavaScript est désactivé.
L'avantage d'utiliser une seule image est d'éviter une requête HTTP supplémentaire.
Voir : http://css-tricks.com/css-sprites/
Outils d'aide à la création d'images et de CSS :
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
