how can I get an image to change when clicked

I want to use javascript to change the image on a toolbar when it is clicked. Basically i have a speaker imagethat is used to manipulate the volume of the machine’s speaker….from the off/mute position up until the highest volume. And i want the images to change depending on what level of volume is set. Right now, the volume image is always at the off/mute position regardless of the actual volume increase or decrease. Here is the css and js code that i have for this.

[U]This is the css[/U]:
[I]#volumeimage-container {
width:153px;
height:100px;
}

#volumespeakerimage {
position:absolute;
width:153px;
height:100px;
top:0px;
left:0px;
list-style-image: url(“chrome://mybrowser/content/images/tools/volume_settings.png”);
-moz-image-region: rect(0px, 153px, 100px, 0px);
}

.volumespeakerimageoff{
-moz-image-region: rect(0px, 153px, 100px, 0px);
}

.volumespeakerimage1{
-moz-image-region: rect(100px, 153px, 100px, 0px);
}
.volumespeakerimage2{
-moz-image-region: rect(200px, 153px, 100px, 0px);
}
.volumespeakerimage3{
-moz-image-region: rect(300px, 153px, 100px, 0px);
}
.volumespeakerimage4{
-moz-image-region: rect(400px, 153px, 100px, 0px);
}
.volumespeakerimage5{
-moz-image-region: rect(500px, 153px, 100px, 0px);
}

#volumeimage{
position:absolute;
width:153px;
height:100px;
top:0px;
left:0px;
list-style-image: url(“chrome://mybrowser/content/images/tools/in2bar_off.png”);
-moz-image-region: rect(0px, 1162px, 100px, 1009px);
}

#volumeimage-container:hover #volumeimage{
list-style-image: url(“chrome://mybrowser/content/images/tools/in2-bar_on.png”);
}[/I]

[U]And this is what my js looks like for now:[/U]
[I]MyBrowserClass.prototype.SwapVolumeImage = function(on) {

return;

volume = this.CurrentVolume;

volimage = document.getElementById(“volumespeakerimage”);
if (this.Muted || volume == 0) {
volimage.className = “volumespeakerimageoff”;

}
if (volume > 0 && volume <= 25) {
volimage.className = “volumespeakerimage1”;

}
if (volume > 25 && volume <= 50) {
volimage.className = “volumespeakerimage2”;

}
if (volume > 50 && volume <= 75) {
volimage.className = “volumespeakerimage3”;

}
if (volume > 75 && volume < 100) {
volimage.className = “volumespeakerimage4”;

}

if (volume == 100) {
volimage.className = “volumespeakerimage5”;

}

}
[/I]

Also in #JavaScript _↴