I have already shown how to use css sprites, but there are times when you just cannot use them. Sometimes you still want the benefit of preloading the image, so you have to get creative.
An Example
I have created a demo of a CSS sprite in action. The sprite has the two images sitting on top of each other, and each link is using the image as a background image and then shifting the position of it when hovering.
a.spriteVert {
background: url(http://trevordavis.net/images/content/2008/11/sprite-vert.gif) no-repeat top left;
padding-left: 30px;
}
a.spriteVert:hover { background-position: bottom left; }
It works great in the first example, but what happens if the user resizes their text? The sprite starts to break. When I am building a site, I am always thinking with the bulletproof mentality of Dan Cederholm, so this is just not an acceptable solution.
Now, we obviously couldn’t position the images next to each other because we would still have a problem when shifting the image around.
The Solution
Typically when you are using CSS sprites, there is another element containing the anchor. Whether it’s a list item, paragraph, div, etc; this solution will work unless you have a background image on that element as well.
Example
I have created a second demo that “fixes” the first example. The idea behind it is that instead of combining the images into 1 image, you split it into 2. Then you place the image that is being shown on hover as the background image on another element (preferably a containing element), just positioned off the screen.
Then when you hover, you switch the background image, which has already been preloaded, so you don’t get that “white flicker”. That may be a little hard to understand, so I’ll give an example.
The Markup
<p class="spriteContainer"><a href="#" class="spriteVert">Hover Over Me</a></p>
<p class="spriteContainer"><a href="#" class="spriteVert spriteVert2">Hover Over Me</a></p>
<p class="spriteContainer"><a href="#" class="spriteVert spriteVert3">Hover Over Me</a></p>
Note: The extra classes of spriteVert2 and spriteVert3 are just used to change the font size.
The CSS
p.spriteContainer {
background: url(http://trevordavis.net/images/content/2008/11/sprite-hover.gif) no-repeat -9999px -9999px;
}
a.spriteVert {
background: url(http://trevordavis.net/images/content/2008/11/sprite-off.gif) no-repeat top left;
padding-left: 30px;
}
a.spriteVert:hover {
background-image: url(http://trevordavis.net/images/content/2008/11/sprite-hover.gif);
}
More Explanation
So looking at the previous example, I am adding the background image that I want to appear on hover as the background image on the paragraph with a class of spriteContainer, and I am positioning it way off the screen.
Then when I hover over an anchor with a class of spriteVert, I change the background image to be the one from the paragraph with a class of spriteContainer.
Conclusion
While this is not as ideal as using CSS sprites because you increase the number of hits to your server, it can help to eliminate the white flicker that you get if the image is not preloaded.
20 Comments
Phil
11.12.2008Nice solution. I recently ran into this issue but unfortunately couldn’t add the container to the HTML so came up with a slightly different workaround - using a bigger image! I just put a 100px gap between the normal and hover states.
Neal G
11.12.2008I just wrote a very similar article
david
11.12.2008love this technique…
was looking for a solution to this very same problem.
here is a working example in one of my projects.
http://www.mahindrausa.com/35series/
marvin
11.13.2008hey, i really like this solution. very nice tip!
The Mystery Of CSS Sprites: Techniques, Tools And
04.28.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
The Mystery Of CSS Sprites: Techniques, Tools And
04.28.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
The Mystery Of CSS Sprites: Techniques, Tools And
04.28.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
The Mystery Of CSS Sprites: Techniques, Tools And
04.28.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
解密CSS Sprites：技巧ã€
05.05.2009[...] How to Preload Images When You Can’t Use CSS Sprites 如何处ç†CSS Spriteså¯¹ç½‘é¡µå†…å®¹çš„å½±å“ [...]
解密CSS Sprites：技巧ã€
05.06.2009[...] How to Preload Images When You Can’t Use CSS Sprites 如何处ç†CSS Spriteså¯¹ç½‘é¡µå†…å®¹çš„å½±å“ [...]
The Mystery Of CSS Sprites: Techniques, Tools And
07.09.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
CSS Sprites: CSS图片åˆå¹¶æŠ€
09.06.2009[...] How to Preload Images When You Can’t Use CSS Sprites 如何处ç†CSS Spriteså¯¹ç½‘é¡µå†…å®¹çš„å½±å“ [...]
ZODIAC » CSS Sprites(CSS图åƒæ‹¼
09.08.2009[...] How to Preload Images When You Can’t Use CSS Sprites 如何处ç†CSS Spriteså¯¹ç½‘é¡µå†…å®¹çš„å½±å“ [...]
The Mystery Of CSS Sprites: Techniques, Tools And
10.03.2009[...] How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. [...]
Maximiliano » Blog Archive » Qué es
11.02.2009[...] http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/ http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/ [...]
??CSS Sprites????????? | ????
12.25.2009[...] How to Preload Images When You Can’t Use CSS Sprites ????CSS Sprites???????? [...]
??-IT Player » Blog Archive » ??CSS Sp
12.25.2009[...] How to Preload Images When You Can’t Use CSS Sprites ????CSS Sprites???????? [...]
10 Ways to Instantly Speed Up Your Website | DevMo
01.12.2010[...] How to Preload Images When You Can’t Use CSS Sprites [...]
10 Ways to Instantly Speed Up Your Website | niaZo
01.27.2010[...] How to Preload Images When You Can’t Use CSS Sprites [...]
?Go?CSS Sprites???????|????
05.26.2010[...] How to Preload Images When You Can’t Use CSS Sprites ????CSS Sprites???????? [...]
——-