Back to Progrower.coffeecup.com
<div id="one"

onmouseover="soundManager.stopAll();soundManager.createSound({
id:'one',url:'media/home.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('one');">
<a id="switch" href="index.html" title="Home"></a>
</div>
<script type="text/javascript" src="sounds/js/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.debugMode = false;
soundManager.url = 'sounds/js/soundmanager2.swf';
soundManager.onload = function() {
soundManager.createSound({id:'one',url:'sounds/media/home.mp3',autoLoad:true});
soundManager.createSound({id:'two',url:'sounds/media/restoration.mp3',autoLoad:true});
soundManager.createSound({id:'three',url:'sounds/media/history.mp3',autoLoad:true});
soundManager.createSound({id:'four',url:'sounds/media/publications.mp3',autoLoad:true});
soundManager.createSound({id:'five',url:'sounds/media/reconphotos.mp3',autoLoad:true});
soundManager.createSound({id:'six',url:'sounds/media/links.mp3',autoLoad:true});
soundManager.createSound({id:'seven',url:'sounds/media/collection.mp3',autoLoad:true});
soundManager.createSound({id:'eight',url:'sounds/media/offair.mp3',autoLoad:true});
soundManager.createSound({id:'nine',url:'sounds/media/transmitreceive.mp3',autoLoad:true});


soundManager._writeDebug('soundManager.onload()');
}
</script>
<style type="text/css">

#switch
{
display: block;
width: 81px;
height: 82px;
background: url(sounds/images/switch-menu_01.gif) no-repeat 0 0;

}

#switch:hover
{
background: url(sounds/images/mo_switch-menu_01.jpg) no-repeat 0 0;
}

</style>
Code for images Paste each one to it's own HTML box
Paste to head of page or to the Header html of one of the image HTML box's
<div id="two"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'two',url:'media/restoration.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('two')">
<a id="switch" href="TheRestoration.html" title="The Restoration"></a>
</div>
<div id="three"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'three',url:'media/history.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('three')">
<a id="switch" href="History.html" title="History"></a>
</div>
<div id="four"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'four',url:'media/Cpublications.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('four')">
<a id="switch" href="Publications.html" title="Publications"></a>
</div>
<div id="five"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'five',url:'media/reconphotos.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('five')">
<a id="switch" href="Gallery.html" title="Recon Photos"></a>
</div>
<div id="six"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'six',url:'media/links.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('six')">
<a id="switch" href="Links.html" title="Links"></a>
</div>
<div id="seven"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'seven',url:'media/collection.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('seven')">
<a id="switch" href="Collections.html" title="Collections"></a>
</div>
<div id="eight"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'eight',url:'media/offair.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('eight')">
<a id="switch" href="OffAir.html" title="Off Air"></a>
</div>
<div id="nine"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'nine',url:'media/transmitreceive.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('nine')">
<a id="switch" href="Transmit.html" title="Transmit Receive"></a>
</div>
If you want the same sound for each image change the sound url for every image to the same sound file.
If you want the same sound for each image make the url's the same.
This is the image that shows. Add a folder to the sounds folder called images and add your image to it in VSD. Name it switch-menu_01.gif
This is the image that shows on mouseover. Add it to the images folder. Name it mo_switch-menu_01.jpg
You can use what ever images you like. Alter the url's to fit your images.
Play sound on Mouseover
Mutiple sounds and images
soundmanager2.js
soundmanager2.swf
Right click on the links and do a save as
Now add a folder to the Root of your site called sounds.Now click on sounds and add a folder inside it called js. Now click on the js folder and click on add files and browse to the two files that you did the save as for above. Next click on sounds again and add a folder inside it called media. Now click on the media folder and browse to the sounds you want to use. Next click on sounds again and then add folder and add a folder called images. Now browse to the images you would like to use for your project and add them.
One image and sound with no mouseover change.
Adjust the link href's to fit your site.