Keep image hover button when click using jQuery

Question

I have the following code to provide a hover effect when I hover over a button image:

 $("img.hoverImage")
    .mouseover(function () {
        var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
        $(this).attr("src", src);
    })
    .mouseout(function () {
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    });

This works great. I now have an additional requirement:

I have three buttons in a row that all have class="hoverImage".

<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/1.png"/></a>
<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/2.png"/></a>
<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/3.png"/></a>

I still want to keep this hover effect but now I also want to change it so when I click on an image, it keeps the hover image shown (even when I mouse out of that image). When I click on another button, it should remove the hover from the other buttons.

NOTE: that clicking on the image links do NOT redirect to a new page (they just call some ajax from a js file)

What is the best way to extend the code below to support this with jQuery? It seems like I need to disable the mouseout handler after the item is clicked but I am trying to avoid having a complicated solution.

Answer 1

You can track active state of clicked image with one of class/data/attr, something like this will do the work.

$("img.hoverImage").mouseover(function(){
  if ($(this).is('.activeImage')) return;
  var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
  $(this).attr("src", src);
}).mouseout(function(){
  if ($(this).is('.activeImage')) return; // Skip mouseout for active image
  var src = $(this).attr("src").replace("_hover", "");
  $(this).attr("src", src);
}).click(function(){
  // remove previous active state
  $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
  // set new active state
  $(this).addClass('activeImage');
  return false;
});

Answer 2

$("img.hoverImage").click(function() {
    $(this).removeClass("hoverImage").addClass("keepImage");
    $(this).siblings("img.keepImage").removeClass("keepImage").addClass("hoverImage");
});

Basically, you remove the hoverimage class and the functionality of it on click, making the mouseout event not occur when you mouse out. It also restores the hoverImage class to all siblings.

You still might need to restore the non-hover image on siblings in my click handler there though.

Edit: I made you a JSFiddle, and i took a different approach:

http://jsfiddle.net/jqWJN/2/

Basically, you make a few links with class hoverImage, like so:

<a class="hoverImage"> </a>

Then you declare them to be inline-blocks, with a width and height matching that of your image, and give them a background-image of your choosing:

a.hoverImage {
    display: inline-block;
    width: 100px; height: 100px;
    background-image: url(http://placekitten.com/g/100/100);
}

Then, you make a CSS property that gives them a new background-image when they are hovered, and when they have the class "keepImage":

a.hoverImage:hover, a.hoverImage.keepImage {
    background-image: url(http://placekitten.com/100/100);
}

Naturally, you'll have to make a unique one for each link if you want different pictures.

Finally, you make a small snippet of JQuery that adds the class keepImage to them when they're clicked, and removes the class from any siblings who has it:

$("a.hoverImage").click(function() {
    $(this).siblings(".keepImage").removeClass("keepImage");
    $(this).addClass("keepImage");
});

If you'd like this to work on a broader scale than just one set of siblings, like say, page-wide, just replace this:

$(this).siblings(".keepImage")

with this:

$(".keepImage")

Good luck!