2

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>
4

1 回答 1

0

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.

于 2012-11-27T19:41:51.947 回答