[javascript] Change image onmouseover

What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>

Ok, this is working, but how to change back to the original image after mouseout?

If it is possible, I want to do this thing inline, without document.ready function.

You can do that just using CSS.

You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover.

i.e.

HTML:

<a href="#" id="name">
  <span>&nbsp;</span> 
</a>

CSS:

a#name span{
  background-image:url(image/path);
}

a#name:hover span{
  background-image:url(another/image/path);
}

Here is an example:

HTML code:

<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>

JavaScript code:

$(document).ready(function() {
    $( "#myImg" ).mouseover(function(){
        $(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
    });

    $( "#myImg" ).mouseout(function(){
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
    });
});

Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;) The hover method is better, of course.

Thy to put a dot or two before the /

('src','./ico/view.hover.png')"

here's a native javascript inline code to change image onmouseover & onmouseout:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>

I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the a tag (so instead of the document.MyImage, I used this.src)

<img 
onMouseOver="this.src='ico/view.hover.png';" 
onMouseOut="this.src='ico/view.png';" 
src="ico/view.png" alt="hover effect" />

It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.

jQuery has .mouseover() and .html(). You can tie the mouseover event to a function:

1. Hides the current image.
2. Replaces the current html image with the one you want to toggle.
3. Shows the div that you hid.

The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.

<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

Demo http://jsfiddle.net/W6zs5/