CSS rollover. Image swap

CSS rollover using image swap:

HTML code:

<a href=""></a>

CSS code:

a {background: url(out.gif) center top no-repeat, url(over.gif) -9999px -9999px no-repeat; height: 81px; display: block;}
a:hover {background: url(over.gif) center top no-repeat;}

Swap image 1 ( out.gif ):

Swap image 2 ( over.gif ):

The concept:

  1. An element has two CSS background images assigned. So they both end up to be loaded into web browser cache. But one of the images is given position way out of view: -9999px -9999px, so it is practically hidden.
  2. When mouse pointer is moved over the element, background CSS property gets for its image only the one that was hidden and now with a positioning allowing it to be in view.
Browser support
Internet Explorer 10.0+
Firefox 3.6+
Google Chrome
Opera 10.5+
Safari 3.1+
SeaMonkey 2.1+
Firefox 3.6+
Google Chrome / Chromium
Opera 10.5+
SeaMonkey 2.1+