-----------------------------Aliens have been lurking in this area. Mouse along this line ----------------------------
Bruceee's Sandpit
Web Design with SiteSpinner
This page illustrates some ways of producing sound effects in SiteSpinner when you mouse over an object. These effects play a .wav file. You can use these sounds in conjunction with other SiteSpinner mouseover effects.
For all the following examples, I use a sound file like 'click.wav' which lives in a folder named 'sounds'.
I cover the following topics:
Finding Sound Effects
If you want a particular sound effect, think of a name for the sound you want -- eg CorkPop.wav. A search of the web for this file may then turn up what you are looking for.
Also a search for .wav files on your computer will very likely turn up something useful.
Here are some of the smaller files I have uncovered:
Pop for Popup Windows (Old Method)
If you are using Version 2.50b of SiteSpinner or later, do not use this method. Instead use the new method which applies to the new SiteSpinner popup function.
Images in Popup Windows shows the old way I used to produce popup windows with SiteSpinner. This example extends that to produce a pop sound as the window pops up. Click on the following image:
<script language=javaScript>
function popupWithPop (aFileName)
{
result=popup(aFileName);
document.all.sound.src='sounds/pop.wav';
return result;
}
</script>
To produce this effect, I used the following Javascript as a Code Object on this page.
It is important to make the sound after you execute the popup code. In this way the sound occurs at the same time as the new window opens. The code that actually generates the popup window (the javascript function named 'popup') is the same as that shown in Images in Popup Windows. The SiteSpinner link code is similar too -- just a different name for the function:
javascript: void popupWithPop ('CymbidiumP')
As with the Object Mouseover, you also need to have this bit of code somewhere on your page. If you are already using it for other sound effects, you don't need to repeat it:
Conclusion
A final note of caution - you can make very, very annoying web pages with sounds. So if you use .wav sounds at all, keep them discreet and under about 5K file size.
Sound Effects with SiteSpinner
Note: These sound effects work only with recent versions of Internet Explorer. They all use the <BGSOUND> tag which other browsers do not support.
Make a sound when you mouse over text
Make a sound when you mouse over an image
Make a sound when you mouse over an object
Make a pop when a popup pops up
Shoot some aliens
Some sample .wav files
The end
Text Mouseover
This is the simplest way I have found to produce a sound from a text object. Test it here:
To create this sound, all you need to do is copy and paste this code object to your page:
<BGSOUND SRC="#" ID="sound1" AUTOSTART="TRUE">
<A HREF=javascript:void("") onmouseover="document.all.sound1.src='sounds/click.wav'">
mouseover this text;</A>
Likely changes
- Change name of the sound file to suit yours. In the example, mine lives in the 'sounds' folder and is called 'click.wav'.
- Change the words 'mouseover this text' to read whatever underlined text you want to appear on the user's screen.
Image Mouseover
Substituting a predefined image for the mouseover gives something like this (mouse over the Hot Tip):
To create the sound by mousing over an image, copy and paste this code object to your page:
<BGSOUND SRC="#" ID="sound2" AUTOSTART="TRUE">
<A HREF=javascript:void("")
onmouseover="document.all.sound2.src='sounds/click.wav'">
<img SRC="images/myimage.gif" border=0 width=108 height=108></A>
Likely changes:
- Change name of the sound file to suit yours. In the example, mine lives in the 'sounds' folder and is called 'click.wav'.
- Change the image name "images/myimage.gif" to be the name of the image you want to display.
- Change the width and height parameters to match the width and height of your image. Here myimage.gif is 108 pixels wide and 108 high.
To produce this effect requires two steps:
1. Place this code object on your page. You need only one of these objects on your page - the one object can look after multiple sounds from multiple objects.
2. Using SiteSpinner, from the object where you want to make the sound, set this link
Link Type:
-blank-
Select or Enter the URL to link to:
javascript:void('')"onmouseover="document.all.sound.src='sounds/click.wav'
Your link tab in the Object Editor should look something like this:
<BGSOUND SRC="#" ID="sound" AUTOSTART="TRUE">
Object Mouseover
This example allows you to produce a sound effect for any object you might create in SiteSpinner. Mouse over the yellow rectangle.
Other Mouse Events
So far I have used only onmouseover everts. There are many other events -- here are some others relating to the mouse which might be useful:
- onmouseenter
- onmouseleave (Internet Explorer only)
- onmouseup
- onmousedown
I triggered the sound here from the onmouseleave event. My SiteSpinner link now reads:
javascript:void('')"onmouseleave="document.all.sound.src='sounds/laser.wav'
I hid the images with the SiteSpinner Special FX > Mouse Over > Hide on Mouse Leave
Likely change: Change name of the sound file to suit yours. In the example, mine lives in the 'sounds' folder and is called 'click.wav'.
Size (bytes)
533
799
876
1,127
1,656
1,758
1,837
2,584
You should have heard a click as this text box popped up.
Hot Tip
If you are using a SiteSpinner mouseover effect, set the width and height of the code object to be the same as its physical representation on the published page. The 'Hot Tip' graphic is 108x108 pixels, so set the size of the code object to also be 108x108. In this way the 'hot area' of the visual effect matches the hot area of the sound effect.
This is the best way to produce these sound effects. Although the initial setup is a little more difficult, after that you can do everything just by setting a link. It will work with any object too.
The javascript function vmpopup() will appear once on any page that has a popup function. There is no easy way to modify it before publish to allow for sound. So for this example, I have modified it after publish. After publish, locate the end of the function vmpopup, and insert an extra line at the end of the function as shown. If in doubt, view the source for this page and see how I did it -- it is just a single line insertion. (Near the bottom.)
<BGSOUND SRC="#" ID="sound" AUTOSTART="TRUE">
Click the image to pop up a larger version. You should hear a pop as the image finishes loading.
<BGSOUND SRC="#" ID="sound" AUTOSTART="TRUE">
newWindow.focus(); //Existing code
document.all.sound.src='sounds/pop.wav'; //Insert this line for pop sound
return false; //Existing code
} //End of the function
Pop for Popup Windows (New Method)
If you are using recent versions of SiteSpinner (V2.50b or later), this method will allow you to produce a sound at the same time as your popup window pops.
As with the Object Mouseover, you also need to have this bit of code somewhere on your page, ahead of the vmpopup function. (see next). If you are already using it for other sound effects, you don't need to repeat it.
Likely change: Change name of the sound file to suit yours. In the example, mine lives in the 'sounds' folder and is called 'pop.wav'.
