I have used CSS to show a button and its rollover but their is a slight delay when you hover over the nav button. I did not want to include javascript for this feature and was wondering if there is a different way to get it done.
LINK-
http://www.securehostserver.info/tnw/index-css.htm
Thanks in advance for everyones help!
Todd
HI,
You should never swap an image on hover as it’s too slow and will only get cached the first time it’s called for hence the slight delay.
The best way is to combine all states of the image (normal,hover, active (and even visited if you like)) into one single sprite image. Stack the images vertically above each other and when you do hover you just change the background -position to reveal the other parts of the image.
e.g.
li.home a:hover {background-position:0 -63px}/* where 63px is the offset of the next required image*/
li.home a:active{background-position:0 -126px}
The anchor elements will only be sized to match the size of one image and then when you change the background-position the hover part of the image is shown instantly. All images are pre-loaded because they are actually already being displayed so there is no display.
There are similar methods documented here.
That works great! I was able to follow along and made the change as shown below. One question though… why do the background-position numbers not follow the same as padding or margin. I mean that padding numbers usually start with the top and continue clockwise but it doesn’t seem to be the case with background-position numbers. I wonder why?
LINK-
http://www.securehostserver.info/tnw/index-css2.htm
Todd
That’s because there are 4 settings for margins and padding but only 2 settings for the background position (horizontal and vertical).
More info here in our reference here.