To improve your website’s design or user experience, you might need to preload some images for smooth hover or rollover. Instead of using javascript to preload the images, we can do that using CSS.
1. A container that hold the images to be preloaded
The HTML :
....
...
...
The CSS:
.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}
EXPLAINATION
- We place the container after <body> and assign an absolute position to it because usually there will not be anything at that position.
- We make the container 1 pixel width and height so that visitors cannot see it.
- Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
- Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)
2. Demo & Rollover Code
Demo:
The Code:
Hi,
Once again thanks for the tutorial
.-= Kish´s last blog ..Save $50 when you spend $250 or more =-.
The best solution I have found, congratulations, it’s clear, easy, and it dont pretend to be an extrange and bizarre trick.
how can i get it so that the images are right next to each other so i can use it as a menu.
@nate smith, hi, more explaination? =]
gjhhhhhhhhThere’s visibly a new bundle in order to identify relating to this. I just believe you’ve made various good points inside elements likewise.
I am new to this blog, I must admit it ranks up there among one of the most unique blog ideas I have ever seen.
You don’t need all that. All you need is one line of css:
display:none;
in some browsers, having display:none will not preload the images. thats why we have to do that.
which browsers?
Once again another absolutely perfect tut.! Thank you again!! FB liked/shared, G+1′d, and Digg’d!!