0

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>
Ed Booth
  • 163
  • 2
  • 13

2 Answers2

0

try this:

$("#pausectrl").mouseenter(function(){
  $(this).attr('src','images/pause2.png');
}).mouseout(function(){
 $(this).attr('src','mages/pause1.png');
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • Thank you, but that just changes the images when I hover. I need to use play1.png and play2.png when the page loads. Then pause1.png and pause2.png when the link is clicked. Then play1.png and play2.png again when the link is clicked again. etc... etc... – Ed Booth May 12 '11 at 13:45
0

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

Community
  • 1
  • 1
xkeshav
  • 53,360
  • 44
  • 177
  • 245
  • Thank you, but I am able to swap images. I need to do more than that. I need to use a second set of images for the hover effect after click event. – Ed Booth May 12 '11 at 13:37