onMouseover change image and play sound, onMouseout reset image back to normal

Tags: , , , ,

I’m playing with something in HTML, can I play a sound on mouseover of an image as well as changing the image while the mouse remains there?

Overall developer view would be great!


Yes, but you will need JavaScript to do a lot of this for you.

For the image, you can have two actions:

<img id="imgID" scr="img/image.jpg" onmouseover="imgover();" onmouseout="imgout();" />

Then your two functions will do what you are looking to do:

imgover () {
    document.getElementByID("imgID").scr = "img/newimage.jpg";
    //Code to play sound
imgout () {
    document.getElementByID("imgID").scr = "img/image.jpg";
    //Code to stop sound

Do you need help with the sound too?

Source: stackoverflow