If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Issue with menu hover images delay

Hi

I have a simple CSS menu with two images, one image is the primary display image and the other is the image that is used to give a colour change on hover.

The problem is in a lot of browsers, (Firefox mostly and IE), the hover image delays loading and the image does not appear instantly, leaving the menu a blank white space for about half a second and looks very buggy.

How can I fix this without Javascript?

Can I pre-load the images with css or do I need Java-script and if I do can I just pre-load the images with JS, then leave the rest to css?

The problem is, as you suspect, that the browser hasn't loaded the second image until the user actually hovers over the link. You could use CSS sprites, which is a very useful method of speeding up page loading and solves this problem. But until you learn a bit more, I'd suggest simply using JavaScript to preload the images you have. A Google search should show you plenty of examples.