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

Question

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 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

Seems to me a duplicate of: http://stackoverflow.com/questions/4677249/javascript-hover-image-replacement — lepe, Jan 14 '11 at 09:33

score 4 · Accepted Answer · answered Jan 14 '11 at 09:32

4

Use CSS sprites.

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

answered Jan 14 '11 at 09:32

m.edmondson

30,382
27
123
206

@m.edmondson All right, anyway are you going to use jQuery to make the roll-over work with all browsers ? – aneuryzm Jan 14 '11 at 09:48
Why JS, when CSS :hover can do it (bg-image case). – kapa Jan 14 '11 at 09:54
@bazmegakapa :hover is only working on in internet explorer – aneuryzm Jan 14 '11 at 09:54
No need to use JQuery - use CSS – m.edmondson Jan 14 '11 at 09:55
@m.edmondson if you say so, how to detect mouseover events, over elements in internet explorer then ? – aneuryzm Jan 14 '11 at 10:42
@m.edmondson this posts doesn't specifically mention the mouse-over events, or am I wrong ? – aneuryzm Jan 14 '11 at 10:45
1

@Patrick: yes, in IE6, which you said is not required. From IE7, IE has no problems with :hover. Check: http://www.quirksmode.org/css/contents.html – kapa Jan 14 '11 at 11:50

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

You can use CSS sprite in this situation.

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

edited May 23 '17 at 10:33

Community

1
1

answered Jan 14 '11 at 09:31

rahul

184,426
49
232
263

score 0 · Answer 3 · answered Jan 14 '11 at 09:38

0

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

answered Jan 14 '11 at 09:38

Mehmet KILAVUZ

1

score 0 · Answer 4 · answered Jan 14 '11 at 09:52

0

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

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

answered Jan 14 '11 at 09:52

José Manuel Lucas

199
1
9

You have a script here to preload images: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript – José Manuel Lucas Jan 14 '11 at 09:53

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

4 Answers4