/me@(voip.)?|www./ SamLown.com

Perhaps with this post I’m giving away far to much about how easily I’m pleased, but I couldn’t help share this little hint for easily creating rollover images. As most who know me know, web design isn’t my favourite thing in the world, so I’m well up for making life easy with things like SASS and the art of cut & paste.

This piece of magic however is something I created with a bit of help from Piotr, and easily allows you to set up roll-over images without the hassle of updating the sytle sheets for each and every image.

This is the code that needs to go into your main style sheet to make it work.

.swapper {
   background-repeat: no-repeat;
   background-position: 0 0;
   display: block;
 }

.swapper:hover img, .swapper:hover .swap {
    visibility: hidden;
 }

The HTML that will allow you to make use of this should be similar to the following:

<a href="#" class="swapper" 
  style="background-image: url('/images/button1_back.png');"
><img src="/images/button1.png" alt="Button" border="0"></a>

As can be seen in the HTML snippet, the link is wrapped around the image as per normal, and given the “swapper” class, along with the alternate backgound image, and the main image is set just as a normal image.

Now load this up in Firefox and you should have instant roll-overs!

IE FIX:

IE might not like this setup, but fear not, add the following generic snippet to your style sheet and it should work fine:

* html a:hover {
  visibility: visible; 
}

Let me know if you find this useful! (I’ll try and add an example soon too :-)