想要在悬停时更改img src，然后在单击时更改为其他src

Question

I have a div which contains an img - I want to be able to have the img src change on hover (and then back again when not hovered), but also have the same img change to a different src altogether when it is clicked (and then back again upon second click). So far I have the J-Query code to make it change on hover:

HTML

<div class="tab_box">
   <img id="img1" src="tab.png">
</div>

J-QUERY

$(document).ready(function(){$('#img1').hover(function(){$(this).attr('src','tabt2.png')},function()
{$(this).attr('src','tab.png')}) });

But I am unsure how to then make the change to a different src altogether if clicked (as the image will have to be being hovered over to click it!) Can anyone suggest? For various re-sizing reasons, I want to keep the image as a stand alone image within the div, instead of having it as a background-image of the div, if possible

Answer 1

You can use the .hover() and .click() functions of Jquery. What you have used has syntax problems

Here is the correct code:

$('#img1').hover(function () {
    $(this).attr('src', 'http://www.fateheducation.com/fatehnew/Testimonial_Image/avatar-small.png');
});
$('#img1').click(function () {
    $(this).attr('src', 'http://moduleoff.com/sites/all/themes/moduleoff/images/xdruplicon_rotated_small.png.pagespeed.ic.Xl8nCuL4lR.png')
});

Working Fiddle