Help using JQuery .click event to replace onmousehover and onmouseout attribute

I am new at using Javascript and JQuery and could use a little help.

I am trying to create a control panel for pausing and playing a JQuery Cycle slideshow. The panel has prev, next, and play links. When the user hovers over a control it replaces the image with another. When the user clicks on the Play link it replaces the image with the pause image. I would like to be able to replace the onmousehover and onmouseout attributes as well to define a separate hover image for the pause link. Is this possible?

This is my code:

$('.pause').click(function(){
  $("#pausectrl").attr('src',"images/pause1.png");
  $("#pausectrl").attr('onmouseover',"this.src='images/pause2.png'");
  $("#pausectrl").attr('onmouseout',"this.src='images/pause1.png'");
  return false;
});  

And the HTML:

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" src="images/play1.png" onmouseover="this.src='images/play2.png'" onmouseout="this.src='images/play1.png'"></div><开发者_开发问答/a>  

try this:

$("#pausectrl").mouseenter(function(){
  $(this).attr('src','images/pause2.png');
}).mouseout(function(){
 $(this).attr('src','mages/pause1.png');
});

read this tutorial

http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/

Similar Question

Change the image source on rollover using jQuery

raw code

HTML

<img src="first.gif" data-hover="second.gif" class="rollover" >

jQuery

$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });

Reference