• Hello!

    I am looking for a way to have my site play a simple sound effect when the cursor hovers over a link/button.

    If you look at this site https://cataxrevolution.com you’ll notice two buttons in the middle, login and signup. When you hover the mouse over those buttons they light up. In addition to them lighting up, I want a sound effect to play.

    I’ve researched this extensively but have not figured out a way to make it compatible with wordpress. Any help would be greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter claytonboen

    (@claytonboen)

    Anyone? Any ideas?

    Thread Starter claytonboen

    (@claytonboen)

    In case anyone runs across this from a google search, I have figured it out. You need to use javascript. To accomplish it, you place this in the head of the page:

    <script type=”text/javascript”>
    <!–
    var tmr = null, ebd = null;
    function makesound(file) {
    if (!ebd) {
    var snd = document.createElement(’embed’);
    snd.setAttribute(“name”, “hoversound”);
    snd.setAttribute(“id”, “hoversound”);
    snd.setAttribute(“src”, file);
    snd.setAttribute(“autostart”, “true”);
    snd.setAttribute(“loop”, “false”);
    snd.setAttribute(“volume”, “150”);
    snd.setAttribute(“hidden”, “true”);
    document.getElementById(“sound-holder”).parentNode.appendChild(snd);
    if (tmr) {
    clearTimeout(tmr);
    }
    tmr = setTimeout(‘killsound()’, 200);
    ebd = true;
    }
    else {
    clearTimeout(tmr);
    killsound();
    return makesound(file);
    }
    }
    function killsound() {
    document.getElementById(“sound-holder”).parentNode
    .removeChild(document.embeds[‘hoversound’]);
    ebd = null;
    }
    //–>
    </script>

    NOTE — The timeout option can be adjusted. 1000 = 1 second.

    Then, where you want the file you play, you place the following command outside the image or link:

    <span id=”sound-holder”>

    </span>

    And then the following command inside the Herf:

    onMouseOver=”makesound(‘Tock.wav’);” onMouseOut=”makesound(”);”

    The onMouseOver command plays the effect, the onMouseOut points to null so that it does not play a second time when you move the cursor off the image/link.

    So my full code looked like the following (assuming the code stated above is already in the header):

    <span id=”sound-holder”>
    <div id=”signup”
    <img class=”title” src=”<?php if ( get_option(‘woo_logo’) <> “” ) { echo get_option(‘woo_logo’).'”‘; } else { bloginfo(‘template_directory’); ?>/images/signup.png<?php } ?> ” alt=”Click to Follow Me On Twitter” />
    <h1 class=”replace”>“><?php bloginfo(‘name’); ?></h1>

    </div>
    </span>

    Hi all,

    this is a very interesting conversation.
    I am trying to find out how to add individualized mouseover sounds to page links on the menu bar. My idea is to have certain short sound effects (ect. mp3) played when the mouse is hovering over page links on the menu bar. Does anybody have an idea how to adapt the described method above in order to get this working?

    Than you,

    sz.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to play sound when cursor hovers over image/link’ is closed to new replies.