Question

51

rated 0 times [ 58] [ 7] / answers: 1 / hits: 152219 / 12 Years ago, tue, may 22, 2012, 12:00:00

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.

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

Wed, Nov 17, 21, 00:00, 3 Years ago

Thu, Mar 19, 20, 00:00, 4 Years ago

Sat, Nov 9, 19, 00:00, 5 Years ago

Thu, Oct 24, 19, 00:00, 5 Years ago

Wed, Sep 25, 19, 00:00, 5 Years ago

answered 12 Years ago gageherberth · Accepted Answer

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');

});

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