Code:
<script type="text/javascript">
// you only need to pre-load the images that aren't already in the page:
image1on = new Image();
image1on.src = "img/index_r8_c4_RED.gif";
image2on = new Image();
image2on.src = "img/index_r4_c14_RED.gif";
function on(image) {
image.src = image.src.replace(/\.gif/,"_RED.gif");
var hs = document.getElementById("hidesound");
var url = "...path to the sound file you want to play ...";
hs.innerHTML = '<embed src="' + url + '" hidden="true" autostart="true" loop="false" />';
}
}
function off(image) {
image.src = image.src.replace(/\_RED.gif/,".gif");
}
</script>
</head>
<body>
<!-- the following span can go anywhere on the page (very bottom is good place)-->
<span id="hidesound"></span>
...