CSS Rollover Delay

Firefly86

Firefly86

Firefly86

Associate
Joined
19 Jul 2006
Posts
258
Location
Gibraltar
Hi guys,

as per title :) I'm having some trouble with rollover images.
I've made a simple CSS website and have added a few rollovers, (just using two images and setting a a.hover property in style sheet.

However, whenever I hover over the button, the original button disappears while the second is trying to load.

Is there anyway to either :

1. Leave the original image behind while the second loads, so there isnt a blank space.
2. Have the second rollover images load along with the site, and not just when the button is hovered over.

I hope I'm being clear :)

Any advice appreciated :)
 
The crafty solution is to use one combined background image for both the normal and hover states that's twice the size of the clickable area.

Upon hover, the background image's position relative to the clickable area is changed, so that the normal state image 'slides' out of the way, and the 'hover' half comes into view instead.

Not the best explanation, so here's a linky:

http://www.websiteoptimization.com/speed/tweak/cssrollovers/
 
phpBB forums do this.

Create both buttons, then combine it into one image with one button on top of the other.

In the a element you are using, set its height to half that of the image you are using.

Then in your a.hover property, move the image up [or down].
 
You must log in or register to reply here.
Back
Top Bottom