Play sound on Mouseover
<div id="one"
onmouseover="soundManager.stopAll();soundManager.createSound({
id:'one',url:'sounds/media/coffeecup.mp3',stream:true,autoLoad:true,autoPlay:true,multiShot:false
});
soundManager.play('one');">
</div>
Step 1
Add a HTML box to your page and paste the code below to the Body HTML.
Keep the box open for step 2
Step 2
<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/coffeecup.mp3',autoLoad:true});
soundManager._writeDebug('soundManager.onload() - your code executes here');
}
</script>
<style type="text/css">
#one {
background-image:url('pictures/coffeecup.jpg');
width: 246px;
height: 246px;
}
</style>
Paste this code to the Header HTML of the same HTML box in step 1.
Adjust this to the name of your sound
Adjust this to the name of your sound
Adjust this to the name of your image
Adjust these to the size of your image
soundmanager2.js
soundmanager2.swf
Now lets add the needed files
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 sound you want to use.
Now lets add an image to link the sound to.
Click on the Root of your site then add folder. Name your folder pictures. Next click on pictures then add files. Now browse to the image you want to show for the sound to play on.
Step 3
Step 4
Back to Progrower.coffeecup.com
Mutiple sounds and images