PDA

View Full Version : need help adding rollover sound in Watermark



mild
02-01-2006, 02:19 AM
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

jscheuer1
02-01-2006, 07:41 AM
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):


MM_reloadPage(true);
//-->
onresize=function(){document.getElementById('bleetSound').Play();}
</script>
</head>

And, just below the <body> tag, add this 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 (http://home.comcast.net/~jscheuer1/side/spacer.gif).

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

http://home.comcast.net/~jscheuer1/side/sheep.gif

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.

mild
02-01-2006, 04:21 PM
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