Is It Still OK To Use onMouseOver for Image Swap?

[Planet13]

Please pardon this remedial question.

Is it still ok to use onMouseOver and onMouseOut for simple image swaps?

I ask because the site I saw that explained how to do onMouseOver also said that I SHOULDN'T do them. They had this warning:

"...inline event handlers should be stripped out and replaced with events attached unobtrusively through the DOM."

So should I be using something else?

All I want to do is swap one image for another when someone hovers their mouse over it, and swap back to the original image when they are no longer hovering over it.

Thanks in advance.

[Fotiman]

"...inline event handlers should be stripped out and replaced with events attached unobtrusively through the DOM."

That means that instead of doing this:
<a onMouseOver="...">...</a>
That you should attach event handlers/listeners via the JavaScript code. More like this:

<a id="foo">...</a>
<script>
var foo = document.getElementById('foo');
foo.addEventListener('mouseover', function () { ... });
</script>

With that said, a pure CSS solution may be better.

[matrix_jan]

You can do it through CSS as well. But be careful because mobile users have no such thing as "hovering a mouse".

[Planet13]

Wow, thanks for the replies Fotiman and matrix_jan.

@ Fotiman:

"With that said, a pure CSS solution may be better."

Can I ask why a CSS solution would be better? (And thanks again for the sample code you provided).

@ matrix_jan:

Is there some other best practice then? Or should the whole idea of "roll over" or "on hover" be abandoned, since about 30% of my traffic is from mobile devices?

[Fotiman]

A CSS solution might be better because it's the presentation layer. So in CSS, you might do something like this:
#foo {
background-image: url('image1');
}
#foo:hover {
background-image: url('image2');
}

[lucy24]

Can we take a moment to think of the human user? You want to make sure that they're not mousing-over in hopes of clicking or zooming or in some other way getting information about the image that was there before they moused-over.

If all you're looking at is a "hover" activity, where the changed image is really just a different background, then onMouseOver is overkill anyway. Don't use javascript if the same effect can be achieved with CSS alone. (Occam's Web Design Razor, I think, but don't quote me.)

[Planet13]

Well...

the thought was that i wanted to have some images in the navigation tree on the side, but they seemed really distracting (and one of the things that google noted in their guide to quality raters is that overly distracting secondary content was a bad thing).

So I was going to make the image links in the sidebar a duotone image and then show the color image on mouse over / hover.

~~~~~

I think now I am just going to use a smaller graphic - with NO hover / mouseover effect - that is a combination of smaller color image with text on it to let the user know EXACTLY what will happen if they click the link. Users are kind of like monkeys and they will click on brightly colored objects for no reason. I don't want android / chrome users to tell google that they are disappointed with the content that I link to in my nav bar. Yes, I want people to click on it, but only if they know where it is going to take them.

[tangor]

Is it still ok to use onMouseOver and onMouseOut for simple image swaps?

Yes.

Next question is: Why?

That said I CAN think of a reason for changing an image by either mouse or touch... but not many. Your last thoughts work for me, planet13...

Just know that it won't work with browsers JS disabled. The number of those out there is still in debate, but is a consideration.

[not2easy]

Also depends on how many mobile/tablet users you have or want - there is no hover or mouseover in mobile. In some you can click and hold to see a link's target or info on the link, but most don't have any similar capabilities.