JS原型在点击时替换图像网址

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/原型框架。我仍在学习并感谢任何输入

Answer 1

你可以通过类更改style.backgroundImage（或style.src），并使用切换类名称来替代

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