SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding a mouse over sound along with an image rollover?

    Hello everyone! This community has been absolutely great to me. I am here again with another question! I have a script that follows as such: mouse over images, also when clicked displays a pop up window. Now I need to have it not only roll over to my other image, but play a sound file/click as well. Here is the code I have


    Code:
    <input name="image" type="image" onMouseOver= src="http://japanesefriend.zxq.net/images/pk1pg1roll_15.jpg" onMouseOut= src="http://japanesefriend.zxq.net/images/pk1pg1_15.jpg"  value="" src="http://japanesefriend.zxq.net/images/pk1pg1_15.jpg" onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/flashcards/ichi.gif />")'  align=middle width=131 height=118>


    I greatly appreciate any assistance and time you put into this for me!

  2. #2
    SitePoint Member calflowers's Avatar
    Join Date
    Feb 2012
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place the following script in the <head> of your HTML document:

    <script language="javascript" type="text/javascript"> function playSound(soundfile) { document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; } </script>
    The JavaScript places an embed tag inside an empty span tag when the script is initiated. So, you need to add the following span file somewhere within the body of your HTML page, preferabl near the top of the document:

    <span id="dummy"></span>
    The last thing you need to add is an element that you want to generate the sound on click or on mouseover. Call the script with one of those attributes:

    <a href="#" onclick="playSound('URL to soundfile');">Click here to hear a sound</a>

    <p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>

    Source: webdesign about


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •