A Simple Mouseover Hover Effect with jQuery

A Simple Mouseover Hover Effect with jQuery
To make it all work, we first need to add the jQuery library script between the tags.
<script src="http://yoursite.com/jquery.js" type="text/javascript">
</script></div>
Now lets create the function that will make it all work.

<script  type='text/javascript'>
$(document).ready(function(){
 $(".button").hover(function() {
  $(this).attr("src","button-hover.png");
   }, function() {
  $(this).attr("src","button.png");
 });
});
</script>

The one thing you need to make sure is that the classname in the jQuery 
function (.button) matches the classname of the image tag (button). 

<img src="button.png" alt="My button" class="button" />