At 11/15/2006 09:23 AM, Nick Roper wrote:
I want a list menu that uses both text and images for the links. On
hover the bg images should swap from b/w to colour versions, and the
text colour should change.
...
See: http://dev.logical.co.uk/test/imglinktest.html
Now that you've got your IE hover problem fixed, I'd like to suggest
that you consider rejigging your menu for faster response time.
The way you've got it set up now, your hover images are downloaded
only when the first hover event occurs, creating an awkward delay in
the user interface. I can suggest a few ways to speed this up:
1) Include the normal and hover-state images in the same image file,
and change the background-position on hover. This technique was
described in this article:
CSS Sprites: Image Slicing's Kiss of Death
by Dave Shea
http://alistapart.com/articles/sprites/
and amplified elsewhere on the web (google 'css sprites').
You could have one image for each menu item, each containing the
normal and hover-state image; or you could have one image for your
entire menu containing all the normal states and all the hover states together.
At first it might seem actually slower to combine several images in
the same file, but that depends on your perspective. Because each
image file has a header, two separate images will tend to weigh more
than one image file containing both. Also, similar images can
benefit from the same compression algorithm. During the initial
page-load it's a trade-off psychologically between seeing each image
appear incrementally as the page renders and seeing all the images
appear at once after a slightly shorter total wait-time. In the case
of your menu, with such small images to begin with, the difference in
wait time will be slight. The advantage will be that the hover-state
images will appear instantly on mouseover.
2) Preload the hover-state images by marking them up on the page in a
way that doesn't show -- such as shifting them off-screen with a
large negative margin-left in CSS. By the time the page finishes
loading, they will already be in cache and will appear
immediately. One small disadvantage here is that your page might
contain semantically unnecessary markup to support these image
preloader elements.
3) Preload the hover-state images with javascript. Disadvantages are
the additional clutter of the script itself and the fact that
preloading won't happen when scripting is disabled.
Regards,
Paul
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
