8 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I'm trying to get this code to work properly without the image blinking on the first hover occurance. Is there a better way to make this work efficiently without making the code too long?

CSS

#beliefs {
position:relative;
float:left;
background:url(images/beliefs.png) no-repeat;
display:block;
width:72px;
height:16px;
margin:0;
padding:0; }
#beliefs:hover { background:url(images/beliefs2.png) no-repeat; display:block; }
#beliefs a {display:block; }
#beliefs img { width:72px; height:16px; border:0; }
#beliefs a:hover img { visibility:hidden; }

HTML


Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Most effective technique is

Most effective technique is to combine both states of image into one that way you state the image once on the anchor along with whatever positional offsets required (none should be) then on the hover you just adjust the background-position property to show the other portion of the image that represents the 'on' state.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I'm not totally sure what

I'm not totally sure what you mean but it seems to me I'm already somewhat doing that? I want both my image and hover to be called form my css using a single "id" code. This code works but it blinks once quickly the first time you hover over it. I have another code that works and does not blink but it does not apply both link and hover in the css - only the hover...

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 10 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

what he means is, put both

what he means is, put both stages of the image ( hover and non-hover ) into one picture.

for example: if you have a red image normally and it turns green on hover, put those two together into one jpg.

then on hover, instead of loading the new image, you will just move the background-position up ( or down ) to show the hover state.

for example: first the image is loaded at normal background-position so you see a red button. then as you hover over. the css background-position move the picture up 20px, revealing the green part of the image.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

not quite, Hugo meant to

Hugo meant to actually combine the two images into one (either horizontally or vertically). Then place that image on the anchor revealing only the first (original) half and reposition it to show the second half of it upon hover.

edit: too slow...

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

well thanks guys but how do

well thanks guys but how do you do that when you want both the link image and hover image to be called from the css? I know how do it with an anchor image and then a hover css.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 10 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

lets settle this once and for all

ok, enough talking, here is an example:

http://wellstyled.com/singlelang.php?lang=en&page=css-nopreload-rollovers.html

i hope this explains it all.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 41 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Oh much better! Thanks

Oh much better!
Thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I must learn to explain

Laughing out loud
I must learn to explain better, or failing that should have just hunted a link down.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me