Pure CSS rollovers
The image to the left is a simple CSS rollover. There is one single image that contains both the black and white and the colour versions. When the mouse passes over the image it is shifted so the other half is displayed. No javascript at all is needed and since the images are joined no preloading is necessary either. Due to Internet Explorers implementation of the :hover psuedo class hover only works when applied to <a> tags. The other important thing to remember is that the <a> tag must have the CSS attribute display:block otherwise it won't work in IE.
The mosaic to the right also uses CSS but absolutely no javascript for the rollovers. As the images have the mouse pass over them they display a remote image. The remote image is contained within the <a> tags the :hover is being applied to but uses CSS absolute positioning to be displayed in a remote location. Here's a quick look at the HTML and the CSS involved.
Here's the HTML for each thumbnail and main image:
<a href="#">
<img src="img1.jpg" alt="" id="img1">
<span><img src="img1b.jpg" alt="">
</span>
</a>
And here's the CSS:
#contentbox a span {
display: none;
}
#contentbox a:hover span {
display: block;
position: absolute;
width: 160px;
height: 120px;
top:60px;
left:80px;
border: 0;
}
For a more detailed insight have a look at the source code.