JS Prototype点击后替换图片网址

Question

我创建了一个使用CSS / HTML在鼠标悬停时更改的图像。

我现在要做的是，当单击图像一次时，它将1）更改为悬停图像，2）将变量设置为值1.如果再次单击图像，它将1）改回原始图像，2）将变量设置为0.基本上切换一个区域并设置一个变量如果它是否有效则对应：

在这里看看我的小提琴：http://jsfiddle.net/Dj9wc/8/

这是我想要实现的JS：

$("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 ^^;
}
});

我正在尝试这样做是JS / Prototype框架。我仍在学习并欣赏任何输入

Answer 1

您可以通过类更改style.backgroundImage（或style.src）并使用toggleClassName替换

像这样 - ＆gt; 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");
});