3 replies [Last post]
Lesh
Lesh's picture
Offline
newbie
Last seen: 11 years 22 weeks ago
Timezone: GMT+13
Joined: 2009-12-28
Posts: 6
Points: 13

I have recently built and uploaded online my first website for a client. I have one slight problem, when you hover over the bottom three buttons on the index page, the images disappear momentarily until hovered over again. This also happens on the gallery page. I have no clue as to why it is doing this. I have declared a background image for a then a different one for the a:hover.

The website is: www.shadesofjade.co.nz

If someone could please help it would be appreciated. Any other feedback is most welcome.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 2 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Try making them one image and

Try making them one image and just change the background position instead of loading another image.

So, OFF image on top and ON image on bottom and then

a { background-position: left top; }
a:hover { background-position: left bottom; }

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Lesh
Lesh's picture
Offline
newbie
Last seen: 11 years 22 weeks ago
Timezone: GMT+13
Joined: 2009-12-28
Posts: 6
Points: 13

Works a treat

Thank you. Is this technique called splicing? It has solved my problem and taught me another trick. Thanks very much.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 2 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

It's a simple version of CSS

It's a simple version of CSS Sprites - http://www.alistapart.com/articles/sprites

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph