Link to home
Start Free TrialLog in
Avatar of jmparks
jmparksFlag for United States of America

asked on

How can I add sound to Image Rollover

Hi -
I'm really stumped here. I'm simply trying to use javascript to add sounds to my rollovers.
The code is below. I'm not sure what's wrong... please help.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT TYPE="text/javascript">
<!--
 
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
 
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}
 
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		splash_logo_pg2_01_splash_logo_pg2_02_over = newImage("images/splash_logo_pg2_01-splash_l.gif");
		splash_logo_pg2_02_over = newImage("images/splash_logo_pg2_02-over.gif");
		splash_logo_pg2_03_over = newImage("images/splash_logo_pg2_03-over.gif");
		splash_logo_pg2_04_over = newImage("images/splash_logo_pg2_04-over.gif");
		splash_logo_pg2_05_over = newImage("images/splash_logo_pg2_05-over.gif");
		splash_logo_pg2_06_over = newImage("images/splash_logo_pg2_06-over.gif");
		preloadFlag = true;
	}
}
 
// -->
</SCRIPT>
<title>The Mouth</title>
<script LANGUAGE="JavaScript"><!--
// Preload and play audio files with event handler (MouseOver sound)
// designed by JavaScript Archive, (c)1999
// Get more free javascripts at http://jsarchive.8m.com
 
var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "http://www.themouth.com/sounds/ro1.mp3";
aySound[1] = "http://www.themouth.com/sounds/ro2.mp3";
aySound[2] = "http://www.themouth.com/sounds/ro3.mp3";
aySound[3] = "http://www.themouth.com/sounds/ro4.mp3";
aySound[4] = "http://www.themouth.com/sounds/ro5.mp3";
 
// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
 
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
 
<link rel="shortcut icon" href="/favicon.ico">
</head>
<style>
.phone {font-family: verdana, arial, helvetica; font-size: 11px; font-weight: bold; color: #FFFFFF;}
.bar {font-family: verdana, arial, helvetica; font-size: 10px; color: #333333;}
.links {text-decoration:none; font-family: verdana, arial, helvetica; font-size: 10px; color: #115bf8;}
.links:hover {text-decoration:none; font-family: verdana, arial, helvetica; font-size: 10px; color: #FFFFFF;}
</style>
<body bgcolor="#000000" ONLOAD="preloadImages();">
<table width="100%" height="100%" valign="middle"> 
<tr>
<td align="center">	
<TABLE WIDTH=450 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=5>
			<A HREF="home.php">
				<IMG NAME="splash_logo_pg2_01" SRC="images/splash_logo_pg2_01.gif" WIDTH=450 HEIGHT=142 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD>
			<A HREF="page.php?page_id=3152"
				OnMouseOver="playSound(0); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01-splash_l.gif', 'splash_logo_pg2_02', 'images/splash_logo_pg2_02-over.gif'); return true;"
				OnMouseOut="stopSound(0); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01.gif', 'splash_logo_pg2_02', 'images/splash_logo_pg2_02.gif'); return true;">
				<IMG NAME="splash_logo_pg2_02" SRC="images/splash_logo_pg2_02.gif" WIDTH=74 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="page.php?page_id=3203"
				ONMOUSEOVER="playSound(1); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01-splash_l.gif', 'splash_logo_pg2_03', 'images/splash_logo_pg2_03-over.gif'); return true;"
				ONMOUSEOUT="playSound(1); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01.gif', 'splash_logo_pg2_03', 'images/splash_logo_pg2_03.gif'); return true;">
				<IMG NAME="splash_logo_pg2_03" SRC="images/splash_logo_pg2_03.gif" WIDTH=98 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="page.php?page_id=3151"
				ONMOUSEOVER="playSound(2); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01-splash_l.gif', 'splash_logo_pg2_04', 'images/splash_logo_pg2_04-over.gif'); return true;"
				ONMOUSEOUT="playSound(2); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01.gif', 'splash_logo_pg2_04', 'images/splash_logo_pg2_04.gif'); return true;">
				<IMG NAME="splash_logo_pg2_04" SRC="images/splash_logo_pg2_04.gif" WIDTH=87 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="page.php?page_id=3278"
				ONMOUSEOVER="playSound(3); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01-splash_l.gif', 'splash_logo_pg2_05', 'images/splash_logo_pg2_05-over.gif'); return true;"
				ONMOUSEOUT="playSound(3); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01.gif', 'splash_logo_pg2_05', 'images/splash_logo_pg2_05.gif'); return true;">
				<IMG NAME="splash_logo_pg2_05" SRC="images/splash_logo_pg2_05.gif" WIDTH=79 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="page.php?page_id=3205"
				ONMOUSEOVER="playSound(4); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01-splash_l.gif', 'splash_logo_pg2_06', 'images/splash_logo_pg2_06-over.gif'); return true;"
				ONMOUSEOUT="playSound(4); changeImages('splash_logo_pg2_01', 'images/splash_logo_pg2_01.gif', 'splash_logo_pg2_06', 'images/splash_logo_pg2_06.gif'); return true;">
				<IMG NAME="splash_logo_pg2_06" SRC="images/splash_logo_pg2_06.gif" WIDTH=112 HEIGHT=22 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="images/splash_logo_pg2_07.gif" WIDTH=450 HEIGHT=13 ALT=""></TD>
	</TR>
</TABLE>
</td>
</tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of yessirnosir
yessirnosir

hey jmparks, if you are still looking for more help, you may want to add the javascript zone to your question to get the attention of some JS experts who could help figure out why your existing JS isn't working...