Better method of making a rollover image header.
 

Hi,

Recently I've been re-theming a website of mine and have run into the issue of rollover buttons. They're at the top of the page in the header inside a table. The dashes are just there as a guide for me, ignore them. The method I have always used is to have 2 separate images and to use JavaScript to switch them as the user hovers over them. The main issue, asides from not being able to fade them in/out (as far as I know), is that they tend to take a noticeable few milliseconds to load. This gives that unprofessional and undesirable delay effect I want to get rid of.

I have been through a selection of Google results and all I seem to come across is using CSS. I have tried doing this, using just one image and making the style slide it along to create the rollover effect. I have tried this to no avail. I put the relevant CSS in style.css in the Editor and then added divs to the header table with class="header-tw" (Twitter button) and other things the websites I used told me to add.

I'm just wondering if there's any way of making either the browser pre-load the images as the page loads (to eliminate the delay, I can live with no fade), to get the CSS working (any ideas?) or even another method. If possible I want to stay away from Flash under all circumstances as I wan't my blog to be universal device wise.

Thanks in advance. :)

For rollover hovers I either use the advanced image function you can get with the TineMCE Advanced plugin or my current favorite was is to use the Hover Image plugin.

Thanks for the reply. I've tried out the plugins and the Hover Image plugin was not 3.3.1 compatible. The TinyMCE Advanced one seems like a cool plugin but it just a quick way of creating what I already have. I've decided to go for an entirely CSS approach with no images, but I value your input. :)