If this is a fixed couple of images (they better should be), it's the best to use CSS for holding background image property with for two different classes: one for mouse over, another one for mouse out. In jQuery, change the style using the function
.toggleClass. The mouse events you need is best to handle using
.hover.
Your top-level script in the
<body> element can look like this:
$( document ).ready(function() {
myElement = $("...");
clsIn =
clsOut =
myElement.hover(
function() {
myElement.toggleClass(clsOut, false);
myElement.toggleClass(clsIn, true);
}, function() {
myElement.toggleClass(clsIn, false);
myElement.toggleClass(clsOut, true);
}
);
});
Alternatively, you can change
src in
<img> element, or anything else.
Please see:
http://api.jquery.com/hover[
^],
http://api.jquery.com/toggleClass[
^].
See also:
http://api.jquery.com/category/css/[
^].
[EDIT]
I already posted this solution and immediately remembered that
it could be done in pure CSS, without any Javascript. I added the alternative solution as
Solution 3.
But this pure-CSS solution is only good for some simple as the one described ago, when all changes can be described in turn of style properties. For some more complex cases, the solution shown above should still be used. For example, hovering mouse could modify some inner HTML of the targeted element. The code sample shown above should give you the idea.
—SA
Submit an article or tip