Home/ Questions/Q 8906811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:44:56+00:00

I have a nice rollover with the sound on 3 images. When you roll

  • 0

I have a nice rollover with the sound on 3 images. When you roll off they pause. I’m trying to get them to restart when they are rolled over again, not start from where they previously were, which they currently do, i tried changing pause to stop in the onmouseout and that didn’t work… any help would be greatly appreciated!!!!

Here is the code i’m currently using

<head>
<audio id="sound1" src="audio/banner_vo_title.mp3"></audio>
<audio id="sound2" src="audio/banner_vo_authorname.mp3"></audio>
<audio id="sound3" src="audio/banner_vo_publication.mp3"></audio>
</head>


<div id="buttons">
<a href="link to a site" >
    <img src="images/stitch.png" width="345" height="78"
        onmouseover="document.getElementById('sound1').play()"    
        onmouseout="document.getElementById('sound1').pause()"/></a>
    <img src="images/author.png" width="392" height="78"      
         onmouseover="document.getElementById('sound2').play()"  
         onmouseout="document.getElementById('sound2').pause()"/>
    <img src="images/publication.png" width="346" height="78"
         onmouseover="document.getElementById('sound3').play()"             
         onmouseout="document.getElementById('sound3').pause()"/>
</a>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Reset the currentTime to 0

    https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement

    <a href="link to a site" >
    <img src="images/stitch.png" width="345" height="78"
        onmouseover="var sound=document.getElementById('sound1'); sound.currentTime=0;sound.play()"    
        onmouseout="document.getElementById('sound1').pause()"/></a>
</a>

    Suggestion, please don’t use inline HTML handlers, it’s so much easier to work with JS and HTML separately.

    • 0