Sound Rollover, stop sound on mouseout

**Nightwing308** · 12-02-2014, 01:39 AM

1) Script Title: DOM Image and Sound Rollover v4.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex15/domroll.htm

3) Describe problem: I am using the sound rollover effect on the image of a wolf. On mouseover, the wolf throws his head up and the sound effect is a beautiful howl. However, on mouseout, the howl continues while the wolf's head returns to its original position. Is there a way to make the sound (howl) stop on mouseout?

Any help would be greatly appreciated.

**FrickenTrevor** · 12-03-2014, 04:51 PM

Can you post the code you have so far?

**Nightwing308** · 12-03-2014, 05:30 PM

Originally Posted by FrickenTrevor

Can you post the code you have so far?

On the image:

<img border="0" src="HowlingWolf1.jpg" class="domroll HowlingWolf1a.jpg" data-sound="wolfhowl1.mp3, wolfhowl1.ogg, wolfhowl1.wav" width="300" height="350">

and the code for the provided .js file inserted at the very end of the <BODY> section:

<script src="chrisdomroll.js">



/****************************************************

* DOM Image rollover v4.0: By Chris Poole http://chrispoole.com

* Script featured on http://www.dynamicdrive.com

* Keep this notice intact to use it :-)

****************************************************/



</script>

as instructed on the script's page http://www.dynamicdrive.com/dynamicindex15/domroll.htm

It works well, both the image rollover AND the sound, but I can't figure out how (where) to modify the code in the .js file, so that the sound stops when the mouse moves off the image.

**ddadmin** · 12-04-2014, 02:43 AM

The script should already do that actually, cease playing the audio file immediately onmouseout of the image. I tried this with a long music file as well, and onmouseout the music stopped.

**Nightwing308** · 12-04-2014, 03:44 AM

Maybe I have something wrong in the code somewhere, but my wolf howl does NOT stop when I move the mouse off the image.
I've uploaded a test page to see if it's just a problem when I view it locally, but it still does it online too (in IE, FF, Chrome, Opera and Safari).
The link to my sound test is here http://www.nightwingsgraphics.com/So...soundtest.html, if you could maybe have a look at it and see if the howl stops for you when the mouse moves off the image (the wolf's head goes back down).

**ddadmin** · 12-04-2014, 08:52 PM

I downloaded just wolfhowl1.mp3 and tested it with the script, which does seem to immediately stop the playback onmouseout. On your page it doesn't though. It might have something to do with the fallback audio files you've also defined inside the IMG tag. Try removing those so you're just left with the .mp3 version and see what happens.

**Nightwing308** · 12-04-2014, 10:58 PM

Okay, here is what I tested, and the results:

I created 3 separate pages -
http://www.nightwingsgraphics.com/So...oundtest2.html calls ONLY the .mp3 sound file
http://www.nightwingsgraphics.com/Soundtest/soundtest3.html calls ONLY the .wav sound file
and
http://www.nightwingsgraphics.com/So...oundtest4.html calls ONLY the .ogg sound file

In ALL instances, the howl continues on mouseout, but some Browsers don't play the howl at all unless the specific sound file format they require is in the code.

IE - plays ONLY #2 (the page with the mp3 sound file)
SAFARI - plays ONLY #2 and #3 (the pages with the .mp3 and the .wav sound files)
CHROME - plays ONLY #3 and #4 (the pages with the .wav and .ogg sound files)

Firefox and Opera Browsers play all 3 test pages, BUT (as mentioned) the sound on all the test pages continues on mouseout

What am I missing??????

**ddadmin** · 12-04-2014, 11:16 PM

For my own testing I used the following HTML markup:

Code:

<!doctype html>

<img src="original.jpg" class="domroll hover.jpg" data-sound="wolfhowl1.mp3" />

<script src="chrisdomroll.js">

/****************************************************
* DOM Image rollover v4.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/

</script>

and the attached chrisdomroll.js, which is a slightly modified version of the .js file I had attached in another thread of yours requesting that the audio file loop continuously while the mouse is over the image.

**Nightwing308** · 12-05-2014, 12:16 AM

And that works...AND explains why it didn't work for me because I was using the original chrisdomroll.js file that I had downloaded from
http://www.dynamicdrive.com/dynamicindex15/domroll.htm

I retested it, and with your modified chrisdomroll.js file the sound stops on mouseout, with the original .js file the sound continues.
So, once again a BIG THANKS. You're AWESOME!

**Nightwing308** · 12-05-2014, 02:29 AM

At the possibility that you might want to strangle me now...I've come across a little "glitch" with the modified .js file. The sound works perfect, just as I needed it to, and so does the mouseover effect on the image of the wolf.
HOWEVER, on the same page are also navigation buttons with a mouseover effect. They light up on mouseover and go dim again on mouseout, but have NO sound effect attached to them.This works fine with the original chrisdomroll.js file, BUT with the modified version that allows the sound to stop on mouseout, the navigation buttons that have no sound effect continue to stay in their mouseover (highlighted) state on mouseout (at least until the page is reloaded).

I've added one button to a soundtest page here
http://www.nightwingsgraphics.com/So...oundtest1.html
so you can see what I mean.

I tried just adding data-source="" to the domroll code of the button, but that doesn't fix the problem. Do I need to create a "silent" soundfile for the buttons or is there a different way to correct this?

Thread: Sound Rollover, stop sound on mouseout

Thread Tools

Search Thread

Sound Rollover, stop sound on mouseout

Similar Threads

Sound Rollover, continue sound until mouseout

stop sound when closing div

on Close, stop sound

Stop a embedded sound with a link (not with a stop-button)

Stop a embedded sound with a link (not with a stop-button)

Bookmarks

Bookmarks

Posting Permissions