Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Play sound on click.

innerHTML

  • Please log in to reply
4 replies to this topic

#1 iConquest

iConquest

    CC Newcomer

  • Just Joined
  • PipPip
  • 17 posts

Posted 31 July 2009 - 12:48 PM

Hey :)

On my website, I've got a div at the bottom which is basically just an image that changes when you put your mouse over it:

Before mouseover:

Posted Image

On mouseover:

Posted Image

I want a sound to play when you click it.

I found a way to do this using javascript.

Here's the script:

<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>


and here's the code for the images (including the mouseclick code to play the sound):

<span id="dummy" onclick="playSound('images/where.mp3');"><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bottom-1','','images/dateover.png',1)"><img src="images/date.png" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"  /></a></span>


When I click the image, the sound plays but it also gets rid of the images:

Posted Image

This happens to everything that I try and use the sound on. For example, if I tried to click one word in <SPAN> tags, the sound would play but the word would disappear.

Is there a way to stop stuff disappearing when I want the sound to play?

Thanks.
  • 0

#2 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 31 July 2009 - 04:33 PM

It looks like you're REPLACING the contents of the div tag with the sound tag. Try this (untested):
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=document.getElementById("dummy").innerHTML +
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>

  • -1

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#3 iConquest

iConquest

    CC Newcomer

  • Just Joined
  • PipPip
  • 17 posts

Posted 01 August 2009 - 12:33 AM

It worked! Thanks a lot! :)
  • 0

#4 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 01 August 2009 - 04:22 AM

Whew! I'm glad it worked :)
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#5 j_berkobien

j_berkobien

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 10 August 2009 - 04:13 PM

I've been working to try and achieve a similar goal of both an image rollover and an Onclick MP3 Sound. I used the codes you gave, but the problem is:

When I click the image once, it works perfectly.
When I click the image the second time, it plays the sound two times.
When I click the image the third time, it plays the sound three times.
...etc...

I'm looking to have an image rollover that only plays once each time it is clicked. Does that make any sense? What can I do?
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download