需要帮助，使用HTML在tumblr博客中为我的图像按钮添加声音效果

Question

I have six image buttons on my Tumblr blog that I want to add this sound effect to play when I hover over the image. Each button is set up like:

<form name="mybutton" action="insert link here" method="POST">
    <div style="position: absolute; left: 247px; top: 204px;"> 
         <input type="image"  id="button" src="insert image here " onMouseOver="this.src='insert image here'" onMouseOut="this.src='insert image here'"/>
    </div>
</form> 

However, no matter what I do, I can't get it to work. I would like to keep it simple if possible. Can someone help me?

Answer 1

This HTML:

<audio id="audioImagePlay" style="display:none">
    <source src="url to your audio source" />
</audio>

And this JavaScript:

<script>
    //get the button element and attach the onmouseover event handler to it. When mouse over fires execute function playAudio.
    document.getElementById("button").addEventListener("mouseover", playAudio, false);

    function playAudio()
    {
       //get audio element and initiate play.
       document.getElementById("audioImagePlay").play();
    }
</script>

Should do it for you.