My menu is made up of images - not background images, just images nested inside an a element. When the user hovers over an image, I want the image to be replaced. Each menu item has a different image and needs a different image on hover. How would you recommend I do this so there is no delay in loading the image when the user first hovers?

 

Here is my html:

 

<ul id="navbar" class="fr">
           <li><a href=""><img src="images/coloured_in_nav/home.png"/></a></li>

           <li><a href=""><img src="images/coloured_in_nav/web.png"/></a></li>

           <li><a href=""><img src="images/coloured_in_nav/print.png"/></a></li>

           <li><a href=""><img src="images/coloured_in_nav/other.png"/></a></li>
           <li><a href=""><img src="images/coloured_in_nav/about.png"/></a></li>
                  </ul>

CSS sprites will help you.

For instance:

http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

http://www.alistapart.com/articles/sprites/

http://www.alistapart.com/articles/sprites2/

http://skyje.com/2010/02/css-sprites/

Let's go back to the beginning. All images that are not part of the content should be inserted as background-images. Without exception. A good rule of thumb for determining whether an image is content or decoration is to examine (or imagine) your page as unstyled HTML, and ask yourself if that image belongs on the page.

 

All navigation should have link text. Again, without exception. If you want to replace that text with an image, set it as a background-image and give the text a very large negative text-indent in ems. That ensures that your text is still accessible to screen readers, and specifying it in ems rather than pixels means it doesn't sidle back into view if the text size is increased.

CSS sprites will help you.

For instance:

http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

http://www.alistapart.com/articles/sprites/

http://www.alistapart.com/articles/sprites2/

http://skyje.com/2010/02/css-sprites/

 

That's what I did, thanks very much

Let's go back to the beginning. All images that are not part of the content should be inserted as background-images. Without exception. A good rule of thumb for determining whether an image is content or decoration is to examine (or imagine) your page as unstyled HTML, and ask yourself if that image belongs on the page.

 

All navigation should have link text. Again, without exception. If you want to replace that text with an image, set it as a background-image and give the text a very large negative text-indent in ems. That ensures that your text is still accessible to screen readers, and specifying it in ems rather than pixels means it doesn't sidle back into view if the text size is increased.

 

Thanks for this. I haven't learned any real thick and fast rules so I really appreciate learning golden rules such as these. I have changed them now to background images.