What's the best way to switch images on mouse-over events?

What's the best way to switch images on mouse-over events ?

I want to swap 2 images when I move the mouse over and out an object on my webpage.

I would like to know for both开发者_JAVA百科 cases: - css-background images assigned to , , elements (image url is in css file) - elements (image url is in html code)

I'm currently using jQuery for it. But the problem is that the second image is always showed with a bit of delay the first time a roll-over event occurs, because it needs to be loaded.

NB. I need a solution compatible with all browsers! (IE 6-7 not required. IE 8, Firefox, Safari, Chrome...)

thanks

Use CSS sprites.

Because "both" images are downloads at once - they will appear instantly for the user.

Define two class like (clsImg1,clsImg2) and define images to their backgrounds. You should change the classNames while mouseover-mouseout events called

You can use CSS sprite in this situation.

You can also read What are the advantages of using CSS sprites?

You can try to load the image with jQuery before showing this way:

$('img').attr('src', 'YOUR_IMAGE_PATH').hide().appendTo('html');