Change image onmouseover

Question

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.

Answer 1

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>

Answer 2

Try something like this:

HTML:

<img src='/folder/image1.jpg' id='imageid'/>

jQuery: ​

$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

• DEMO

EDIT: (After OP HTML posted)

HTML:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png"/>
</a>

jQuery:

$('#name img').hover(function() {
  $(this).attr('src', '/ico/view1.png');
}, function() {
  $(this).attr('src', '/ico/view.png');
});

• DEMO