Professor Al teaches Cascading Style Sheets and DHTML Utilizing JavaScript (Cross browser)

Here is a chance to have a little fun at the expense of your viewers! After all if they've endured you this long, maybe they deserve a little break. These onMouseOvers are using two scripts, one for the roll-over images and another for the roll-over sound. These effects are for MSIE and Netscape; there is code in the JavaScript language that covers both browsers for you. If any of this confuses you too much, just look at the source code for this page. Don't forget that I'm showing code as well, ignore whatever is inside of the textarea tags, that's the blue boxes on the bottom of this page.

Boinnngg	Toot	Knock knock knock

The code needed in the <head> for the roll-overs will preload the images and number them so they can be used in the <body> of your Web page. Let’s take a look: (You will find the complete code below so that you can copy and paste into the <head> of your page.)
<script LANGUAGE="JavaScript1.2"> <!-- img1=new Image() img1.src="images/al.jpg"	Start with the SCRIPT and Comment tags and create code for the image that will appear on the page before the roll-over effect.
img2=new Image() img2.src="images/al2.jpg" img3=new Image() img3.src="images/al3.jpg" img4=new Image() img4.src="images/al4.jpg"	This new coding indicates that I have three additional images that will be used in roll-over effect. I was sure to name them distinctly different so I could keep track of them. These images will appear when the mouse passes over the image on the page.
//--> </script>	This code ends the first roll-over script in the <head> and now you are ready to add the code for the sound effects.
<script LANGUAGE="JavaScript"> <!-- var aySound = new Array(); aySound[0] = "audio/boing.wav"; aySound[1] = "audio/toot.wav"; aySound[2] = "audio/knock.wav";	The Script code for the sound effects is rather large and it serves both of our interests if you viewed the complete source code for this area in the Textarea below. However, the portion that can be changed by you is listed here. This is where you list your sound files to be used in the roll-overs.
This is the code that appears in the <body> where you need it to appear. This code produced the first image (boinnngg) on the left side above. The (#) symbol in the href is only a placeholder for an eventual hypertext link to someplace. The complete Script code for all the images can be seen in the Textarea below, it's quite similar. <A HREF="#" onMouseover="document.images['one'].src=img3.src, playSound(0)" onMouseout="document.images['one'].src=img1.src, stopSound(0)"> <IMG SRC="images/al.jpg" NAME="one" BORDER=0></A> If you didn't want to include the sound as a part of the roll-over effect, you would not include the following bits of code: , playSound(0)" and , stopSound(0)", it's that simple!

<script language="JavaScript" type="text/javascript">
<!--
var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "audio/boing.wav";
aySound[1] = "audio/toot.wav";
aySound[2] = "audio/knock.wav";

// 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;

This is the code that can be placed anywhere you need it in the <body> of your Web page.