Jquery Rollovers, issue with click state

Question

Excuse my noobiness when it comes to Jquery, but I have some jquery code that does rollovers for me:

$("img.rollover").hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
    this.src = this.src.replace("_on","_off");
});

Essentially just switching the images from image_on.jpg to image_off.jpg on hover on a bunch of images, now on click i would like to set the state of "image_on" permanently but the hover state seems to overwrite it and it doesn't stay "_on", i'm guessing it something to do with binding of events? I also don't seem to be able to do it so if a user clicks on one image it sets it to on, but if they click another image to return the previous image to the "_off" state and set the current one to the "_on" state.

Any help appreciated, ta.

Answer 1

i would add a "selected" class to the link when it is actually active and filter against that.

$("img.rollover").bind('click',function(){
    $('img.rollover').removeClass('selected');
    $(this).addClass('selected');
}).hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
if(!$(this).hasClass('selected')){
    this.src = this.src.replace("_on","_off");
}
});

Of course, you would style your .selected images using the _on image.

sidenote: Note that the recommended way of implementing rollover images is the css sprite technique: you use an image that contains all the states, use that image as a background image, and adjust the background-position according to :hover, :active states. It's a pure CSS solution that works in all recent browsers.

Answer 2

your hover code seems to run two functions one after the other which will effectively undo each others changes. so _off is turned to _on then back again.

so for hover to toggle it "on" you would just want

$("img.rollover").hover(function () {

this.src = this.src.replace("_off","_on");

});

if you just do this 1 function each time you can then control other states as you'd like e.g.

$("img.rollover").mouseout(function () {

this.src = this.src.replace("_on","_off");

});

Answer 3

You could unbind the hover event $(this).unbind('mouseenter mouseleave') when a click occurs, and rebind if necessary later.