jquery with on off and click state using images

Question

Hi I am trying to do a tri state rollover using jquery. I want an on state off state and click state.

I have to replicate a specific interface style and not using images in not an option. Below is the code that I have used. However, I cannot seem to figure out how deactivate an image when it another is clicked.

Here is a the scenerio.

1) User hovers over image which activates the on state image. 2) User moves off that image and on to another image. THe previous active image is turned off and the the image that is currently hovered over is on. 3) The user clicks an image which activates the clicked state image however, when the user clicks another image previously clicked image goes back to the off state.

I am able to do this with Javascript however, I am new to Jquery and having a hard time trying to figure this out.

Here is the code:

$(document).ready(function() {
   // Navigation rollovers
   $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!matches) {
           imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif");
           // strip off extension
           $(this).children("img").attr("src", imgsrcON);
        }
    });
    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });
    // Navigation clicks
    $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        clkmatches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!clkmatches) {
            imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif");
            // strip off extension
            $(this).attr("src", imgsrcCLK);
        }
    });  
});

Answer 1

To clarify, if an image has been clicked, you want it to stay in the clicked state even if another image is clicked?

If this is the case, I would add a class when the image is clicked, then in your check to remove the state, do a check to see if that class is on the image.

ex.

$('item').click(function(){$(this).addClass('clicked');}
$('other_item').click(function(){
     $('all_items') -- if class != 'clicked' 
         { go ahead and revert it to a normal state, otherwise don't touch it}

Hopefully my pseudo code makes sense.

Answer 2

This piece of code should accomplish what you're looking for. While I haven't tested its correctness (since I presently should be working!), it should at the very least illustrate a way of doing this.

var clicked_obj;
$("#nav a").mouseover(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to mouseover image>";
    });
}).mouseout(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to original image>";
    });
}).click(function() {
    if ( clicked_obj ) {
        $(clicked_obj).removeData("clicked").mouseout();
    }
    clicked_obj = this;
    $(this).data("clicked", true);
    $(this).children("img").each(function() {
        this.src = "<path to clicked image>";
    });
});