I tried creating a new image file for the third link
'home-administration.jpg'. This comprises both black & white and colour
versions of the image next to each other, with the CSS changing the
position when the link is hovered over. The page loads OK in IE, but
when hovering over the last link for the first time, the whole link &
image shifts vertically. It then remains in the same position subsequently.
See: http://dev.logical.co.uk/test/imglinktest.html
Any suggestions?
Thanks,
Nick
Paul Novitski wrote:
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]
*******************************************************************
--
Nick Roper
partner
logical elements
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
