Results 1 to 3 of 3

Thread: need help adding rollover sound in Watermark

  1. #1
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default need help adding rollover sound in Watermark

    thanks for the CSS below - works perfectly

    now i need to add a rollover sound to the sheep graphic in the watermark
    either when the sheep is rolled over OR when the page is resized
    thanks in advance to anyone who can help



    this is the page - http://www.honeyfuzz.com/stringbean/stringbean.html
    this is the sound - http://www.honeyfuzz.com/stringbean/baa.wav

    This script need not be a script. Get rid of the script and use css style. Use this in the head of the page:

    HTML Code:
    <style type="text/css">
    body {
    background:url('notebook.jpg') white bottom right no-repeat fixed;
    }
    </style>
    __________________
    - John

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Looking at your code, I see there is already a script block that ends just above the closing </head> tag, to it we add (additions red):

    Code:
    MM_reloadPage(true);
    //-->
    onresize=function(){document.getElementById('bleetSound').Play();}
    </script>
    </head>
    And, just below the <body> tag, add this code:

    Code:
    <embed id="bleetSound" style="position:absolute;top:-1000;left:-1000;z-index:-100;" src="baa.wav" autostart="false" loop="false" hidden="true" enablejavascript="true">
    <img style="position:absolute;bottom:0;right:0;z-index:100;width:500px;height:460px;" src="spacer.gif" usemap="#1" border="0">
    <map name="1">
    <area shape="poly" coords=" 159, 124, 169, 85, 191, 49, 217, 27, 242, 16, 269, 9, 298, 6, 330, 8, 366, 15, 395, 30, 416, 49, 429, 68, 438, 93, 441, 121, 442, 147, 476, 130, 498, 123, 498, 458, 16, 457, 7, 434, 4, 409, 6, 387, 12, 364, 23, 339, 33, 324, 54, 302, 35, 287, 21, 267, 12, 239, 14, 215, 24, 189, 39, 168, 52, 150, 72, 132, 88, 122, 110, 115, 133, 114, 158, 121" nohref onmouseover="document.getElementById('bleetSound').Play();">
    <area shape="default" nohref></map>
    You will need a transparent .gif file named spacer.gif. It can be very small, you can right click and save mine here.

    Also, you should consider making homepagesheepy.jpg a .gif and smaller (you can right click and save it too):



    The file size will be much smaller this way as well, better page loading.

    One other thing, consider converting baa.wav to mp3 format. The file size will be less and it will play in more browsers on more computers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default absolutely brilliant

    i cant thank you enough

    i have changed the sound to be onmouseclick

    and hopefully turned off the onresize sound too - maybe code is wrong

    i replaced 'play' with 'stop' - need to get the reference books out

    next plan is to try and give visitors 3 different pages (in rotation)

    so each time they visit - a different page comes up

    wish me luck

    and thanks again

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
  •