Avez-vous déjà remarqué que lorsque vous survolez une image, celle-ci devient vide pendant une seconde, puis charge l’image survolée ? 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 (décomposée en deux parties).
En effet, deux images distinctes doivent être chargées 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 en une seule fois et en affiche une partie.
Combiner l’image
La première étape consiste à combiner les deux moitiés de l’image en une seule. Pour ce faire, vous pouvez utiliser l’éditeur d’images de votre choix. Il vous suffit de copier les deux images, de doubler leur hauteur et de coller l’image inactive au-dessus de l’image active.
L’image du milieu devrait correspondre à ce que vous recherchez. Passons maintenant au CSS.
Le code
La première étape du CSS consiste à limiter la hauteur de l’image à la moitié (en gros, pour que seule l’échelle supérieure apparaisse).
Pour les besoins de ce tutoriel, nous utiliserons une classe appelée .rollover-tut. Comme l’image originale de l’échelle fait 153×149, nous utiliserons ce code CSS :
.rollover-tut {
height : 149px ;
width : 153px ;
display : block ;
}Puisque nous créons un lien, nous utiliserons le code HTML suivant :
<a class="rollover-tut" href="#"></a>À ce stade, votre lien doit ressembler à l’image originale de l’échelle, sans effet de survol (pour l’instant).
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 l’image d’arrière-plan de 149 pixels (soit la hauteur d’une image d’échelle ou la moitié des deux combinées).
Une façon plus simple de s’en souvenir est d’utiliser le code de survol suivant, qui aura le même effet que le code ci-dessus, et vous n’aurez pas à vous souvenir des chiffres (conseil d’Art Webb dans 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 l’effet de survol et le chargement de l’image, puisque toute l’image est chargée en même temps.
Conclusion
Cette même technique peut être utilisée pour pratiquement n’importe quel effet de survol d’une image d’arrière-plan. Je ne sais pas si l’un d’entre vous a jeté un coup d’œil à mon blog personnel ces derniers temps, mais j’en fais un usage intensif sur pratiquement tous les liens utilisant une image d’arrière-plan (ainsi que sur le bouton d’envoi de mon formulaire de commentaire).
J’espère que vous avez apprécié cette astuce CSS. Si vous avez des idées pour de futurs articles sur les CSS, n’hésitez pas à m’en faire part dans les commentaires.
WOW! Nice tutorial! I like it!
I will suggest you to examine the navigation of Apple’s official website navigation. Its an awesome use of CSS sprites. Another very effective use of css sprites can be seen here.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
See this image and then see how Martin broken that up on different places in his blog.:}
There are definitely some more advanced ways of using this technique. The one I did was probably the simplest of the bunch.
I also noticed something similar on CSS Tricks which I found interesting.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Hey Leland,
This is a very very good post for beginners who are still using 2 different images to create image rollovers – very well-written, short and sweet! Beautiful buttons too!
I’ve just started using sprites recently on my clients’ projects (found it rather troublesome last time lol).
I have a huge image which have all the icons, buttons that I needed for the website. Then I used background-position to display each elements. It can get really really tedious though if there are just too many elements but it’s really worth it
Btw, it’s my first time here on your website. I love it so much, a lot of beautiful & subtle details
Thanks Iwana, glad you liked the tutorial. Appreciate the kind words about my site as well. 😀
This technique is called CSS Sprites.
You could add one more state… Example: normal, hover, selected… And then for these three states you just change background position to top left, center left, and bottom left. Note: This method requires a little php code 🙂
Thanks for the clarification, Milos. Maybe I’ll do a follow up post on how to do one with a selected/active state too, while still using one image.
You mean CSS code (and not PHP) right?
I mean CSS and a little bit of PHP. In this case we need that php to declare when link is in selected state. Here is example in short for web site with two pages (Page1 and Page2):
Page1 code:
<?php $thisPage="Welcome to Page1!"; ?><head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Welcome to Page1!") echo "id="selected""; ?> href="page1.php">Page1</a></li>
<li><a class="page2" <?php if ($thisPage=="Welcome to Page2!") echo "id="selected""; ?> href="page2.php">Page2</a></li>
</ul>
...content...
</body>
For page2 just $thisPage variable set to “Welcome to Page2!”
CSS for links:
#menu a {background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}
That’s it 🙂 Cheers
Awesome, I know in WordPress it sometimes spits out default classes for active page items if you use their functions.
Like .current-page-item (for active pages) or .current-cat for active category archive.
Thanks for the tips.
No problem 😉 Cheers
I love using one image for the normal and hover states. The only change I would make is for the background position of the hover state. Change it to:
.rollover-tut:hover {
background-position: bottom left;
}
That way if you change the size of the image, you don’t have to adjust the size.
Ah…wow, I never thought of that but it makes perfect sense. Thanks for the tip.
But if you changed the size of the image, wouldn’t you have to change the height and width in the first declaration?
It still helps as it’s just one less thing to change.
Nice and simple. Maybe this will stop people from using 2 images for rollovers.. well to single images =). Nice tut man, will come in handy for some people in the future =)
Glad you liked the tut, Anto.