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
精彩评论