Question

I’m new to jQuery.
I’m trying to add a mouseover event to an image which changes the image and a mouseout event which sets the image back to original.

I have an image

<div id="enter">
    <img src="images/entersite.png"/>
</div>

and some jQuery code

$("#enter").mouseover(function(){
  $("#enter").html("<img src='images/entersitehover.png'/>");
});
$("#enter").mouseout(function(){
  $("#enter").html("<img src='images/entersite.png'/>");
});

I want to add the event to the image element rather than the div.
I was reading something like $(:last:image) to select last image(as it is the last image I thought this would work).

Any help would be great?

Or if you can point me to a decent tutorial I will learn myself?

Answer 1

You can do this very simply with the hover function, which has two arguments: a function for mouseenter and one for mouseleave. You can also select the img element within #enter using a descendant selector.

Finally you can directly set the src property of the img element.

$('#enter img').hover(function(){
    this.src = "images/entersitehover.png";
}, function(){
    this.src = "images/entersite.png";
});