JS Prototype replace image url on click

Question

I have created an image that changes on mouseover using CSS/HTML.

What I am trying to do now is make it so that when the image is clicked once, it will 1) change to the hover image, and 2) set a variable to value of 1. If the image is clicked again, it will 1) change back to the original image, and 2) set the variable to a value of 0. Basically toggling an area and setting a variable to correspond if it is active or not:

Take a look at my fiddle here: http://jsfiddle.net/Dj9wc/8/

Here is the JS that I am trying to implement:

$("RARM").observe("click", function() {
alert("Right Arm!!!");
    if(this.src == 'http://i.imgur.com/wzHgrvS.jpg'){
        this.src({backgroundImage:'http://i.imgur.com/SdOX0I0.jpg'});
        //set variable to 1 here $("{var}").value = 1;
} else if (this.src == 'http://i.imgur.com/SdOX0I0.jpg'){
        this.src({backgroundImage:'http://i.imgur.com/wzHgrvS.jpg'});
        //set variable to 0 here ^^;
}
});

I am trying to do this is JS/Prototype framework. I am still learning and appreciate any input

Answer 1

you can change the style.backgroundImage (or style.src ) by a class and use the toggleClassName to alternate

like this -> http://jsfiddle.net/Castrolol/Dj9wc/10/

css

#RARM.pressed {
    background: url('http://i.imgur.com/SdOX0I0.jpg') 0px -86px no-repeat;
}

javascript

$("RARM").observe("click", function() {
    alert("Right Arm!!!");
    $(this).toggleClassName("pressed");
});