Hi Pearl,
Here is the thing. I once saw a nice menu that had buttons that change color and it had what it seemed to be "on mouse over" sound. The problem is I saw it a long time ago before I knew anything about web development and I don't remember the name of the site. Maybe it was Javascript, maybe it was flash.
I have been trying to make a rollover button with onmouseover sound, but no luck so far. I must tell you I am a newbie at this.
So far this is what I have:
First example: The script for a page with sound onmouseover in an image that is NOT a rollover
<html>
<head>
<title> Sound test</title>
<script type="text/javascript">
function play()
{
track.src = 'sound/metalplate.wav';
}
</script>
</head>
<body>
<div style="position: absolute; left: 451; top: 5;">
<bgsound id="track" src="sound/metalplate.wav">
<a href="archives2.html" onmouseover="play()"><img src="images/gallery.gif" border="0"></a>
</div>
</body>
</html>
The problem I have with this script is that you here the sound every time you refresh the page. Regardless of whether your mouse is over the image or not.
Second example: The script for a page with a rollorover image (patience you'll understand in example three)
<html>
<head>
<title>Rollover Button</title>
</head>
<body>
<div style="position: absolute; left: 451; top: 5;">
<img ID=button8 src="images/button8.gif" width=150 height=40 border="0"
onmouseover='document.getElementById("button8").src="images/button8a.gif"'
onmouseout='document.getElementById("button8").src="images/button8.gif"'>
</a>
</body>
</html>
No problem with this page the rollover image(button) seems to work just fine.
Third example: Here is where it stops working. The only thing that comes to mind is put together the two previous examples. It doesn't work, but I don't know why.
<html>
<head>
<title>Sound test II</title>
</head>
<body>
<div style="position: absolute; left: 451; top: 5;">
<bgsound id="track" src="sound/metalplate.wav">
<a href="archives2.html" onmouseover="play()">
<img ID=button8 src="images/button8.gif" width=150 height=40 border="0"
onmouseover='document.getElementById("button8").src="images/button8a.gif"'
onmouseout='document.getElementById("button8").src="images/button8.gif"'>
</a>
</body>
</html>
The problem for me with all this programming is that I learned it by myself from books and the Internet, so sometimes I don't even know if what I am trying to do is possible or if I am just waisting my time.
Please take a look at it. If you happen to find out why it doesn't work or simply another way to do it or if is even possible. I'll appreciate it if you let me know.
Luis