Avez-vous déjà remarqué que parfois, lorsque vous survolez une image, elle devient vide pendant une seconde, puis charge l'image de survol ? Cependant, lorsque vous revenez en arrière, tout est transparent.
Voici un exemple de ce que je veux dire en utilisant mon image d'échelle souterraine (divisée en deux parties).
C'est parce qu'il y a deux images distinctes à charger, et la seconde (au survol) prend plus de temps à charger lorsque l'effet de survol est déclenché.
Dans cet article, je vais vous montrer comment éliminer ce délai en utilisant une technique CSS qui charge l'image entière à la fois et en affichant une partie de celle-ci.
Combiner l'image
La première étape pour y parvenir est de combiner les deux moitiés de l'image en une seule. Vous pouvez utiliser l'éditeur d'images de votre choix pour ce faire, il suffit de copier les deux images, de doubler la hauteur et de coller l'image inactive au-dessus de l'image active.
L'image du milieu devrait être ce que vous visez. Passons maintenant au CSS.
Le code
La première étape en CSS consiste à limiter la hauteur de l'image à la moitié (essentiellement pour que seule la première échelle apparaisse).
À des fins de ce tutoriel, nous utiliserons une classe appelée .rollover-tut. Comme l'image d'échelle d'origine mesure 153 × 149, nous utiliserons ce code CSS :
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Comme nous créons un lien, nous utiliserons le code HTML suivant :
<a class="rollover-tut" href="#"></a>À ce stade, votre lien devrait ressembler à l'image d'échelle d'origine, sans effet de survol (encore).
Pour que l'effet de survol fonctionne, nous utiliserons une propriété CSS appelée background-position sur la pseudoclasse :hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
Avec le code CSS ci-dessus, vous déplacez essentiellement l'image d'arrière-plan vers le haut de 149 pixels (rappelez-vous, la hauteur d'une image d'échelle, soit la moitié des deux combinées).
Une façon plus simple de s'en souvenir est d'utiliser le code de survol suivant à la place, qui aura le même effet que celui ci-dessus, et vous n'aurez pas à vous souvenir de chiffres (chapeau bas : Art Webb via les commentaires) :
.rollover-tut:hover {
background-position: bottom left;
}Et voici ce que vous obtenez :
Remarquez qu'il n'y a plus de délai entre les effets de survol, car l'image entière est chargée d'un coup.
Conclusion
Cette même technique peut être utilisée pour à peu près n'importe quel effet de retournement d'image d'arrière-plan. Je ne suis pas sûr si certains d'entre vous ont récemment consulté le design de mon blog personnel, mais je l'utilise intensivement sur presque tous les liens utilisant une image d'arrière-plan (et le bouton de soumission sur mon formulaire de commentaires).
J'espère que vous avez tous apprécié cette astuce CSS. Si vous avez des idées pour de futurs articles d'astuces CSS, faites-le moi savoir dans les commentaires.
WOW ! Beau tutoriel ! J'aime ça !
Je vous suggère d'examiner la navigation du site officiel d'Apple. C'est une utilisation géniale des sprites CSS. Une autre utilisation très efficace des sprites CSS peut être vue ici.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
Regardez cette image, puis regardez comment Martin l'a décomposée en différents endroits sur son blog.:}
Il existe certainement des façons plus avancées d'utiliser cette technique. Celle que j'ai faite était probablement la plus simple du lot.
J'ai également remarqué quelque chose de similaire sur CSS Tricks, ce que j'ai trouvé intéressant.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Salut Leland,
C'est un très très bon article pour les débutants qui utilisent encore 2 images différentes pour créer des retournements d'images – très bien écrit, court et concis ! De beaux boutons aussi !
J'ai commencé à utiliser les sprites récemment sur les projets de mes clients (trouvé ça plutôt gênant la dernière fois lol).
J'ai une image énorme qui contient toutes les icônes, les boutons dont j'avais besoin pour le site web. Ensuite, j'ai utilisé background-position pour afficher chaque élément. Cela peut devenir vraiment très fastidieux s'il y a trop d'éléments, mais ça en vaut vraiment la peine.
Au fait, c'est ma première visite sur votre site web. Je l'adore, beaucoup de détails magnifiques & subtils.
Merci Iwana, content que le tutoriel t'ait plu. J'apprécie aussi les gentils mots à propos de mon site. 😀
Cette technique s'appelle les CSS Sprites.
Vous pourriez ajouter un état de plus… Exemple : normal, survol, sélectionné… Et ensuite pour ces trois états, vous changez juste la position de l'arrière-plan en haut à gauche, au centre à gauche, et en bas à gauche. Note : Cette méthode nécessite un peu de code php 🙂
Merci pour la clarification, Milos. Peut-être que je ferai un article de suivi sur la façon de faire un avec un état sélectionné/actif aussi, tout en utilisant une seule image.
Vous voulez dire du code CSS (et pas PHP) n'est-ce pas ?
Je veux dire du CSS et un peu de PHP. Dans ce cas, nous avons besoin de ce php pour déclarer quand un lien est dans l'état sélectionné. Voici un exemple court pour un site web avec deux pages (Page1 et Page2) :
Code Page1 :
<?php $thisPage="Bienvenue sur la Page1 !"; ?><br> <head><br> <title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title><br> ...</head><br> <body><br> <ul id="menu"><br> <li><a class="page1" <?php if ($thisPage=="Bienvenue sur la Page1 !") echo "id="selected""; ?> href="page1.php">Page1</a></li><br> <li><a class="page2" <?php if ($thisPage=="Bienvenue sur la Page2 !") echo "id="selected""; ?> href="page2.php">Page2</a></li><br> </ul><br> ...contenu...
</body>
Pour la page2, il suffit de définir la variable $thisPage sur “Welcome to Page2!”
CSS pour les liens :
#menu a { background-position: left top; } #menu a:hover { background-position: left center; } #menu a#selected, #menu a#selected:hover{ background-position: left bottom; }C'est tout 🙂 À plus
Génial, je sais que dans WordPress, il arrive parfois qu'il génère des classes par défaut pour les éléments de page actifs si vous utilisez leurs fonctions.
Comme .current-page-item (pour les pages actives) ou .current-cat pour les archives de catégories actives.
Merci pour les conseils.
De rien 😉 À plus
J'adore utiliser une seule image pour les états normal et au survol. La seule modification que je ferais concerne la position de l'arrière-plan pour l'état au survol. Changez-la à :
.rollover-tut:hover { background-position: bottom left; }
De cette façon, si vous changez la taille de l'image, vous n'avez pas à ajuster la taille.
Ah… wow, je n'y avais jamais pensé mais ça a parfaitement du sens. Merci pour le conseil.
Mais si vous changiez la taille de l'image, ne faudrait-il pas changer la hauteur et la largeur dans la première déclaration ?
Cela aide quand même car c'est juste une chose de moins à changer.
Simple et efficace. Peut-être que cela empêchera les gens d'utiliser 2 images pour les rollovers... enfin, pour les images uniques =). Bon tutoriel, homme, sera utile pour certaines personnes à l'avenir =)
Content que le tutoriel t'ait plu, Anto.