Demo --> multimouseOver.html

[IMAGE] IU SLIS logo

Demo page logo

Javascript

Here's a script that creates a complex mouseOver.

It instructs the browser to preload the images so that the page downloads faster.

Several images will trigger an image swap elsewhere on the page. Don't bother clicking on the links - they don't work.

Image 1
Image 2

Blank image
Image 3
Image 4

Here's the javascript that is in the <head> of this page:

<script language=javascript>
<!-- Hide from older browsers

if (document.images) {
image1 = new Image
image1.src = ../Images/image1txt.gif
image2 = new Image
image2.src = ../Images/image2txt.gif
image3 = new Image
image3.src = ../Images/image3txt.gif
image4 = new Image
image4.src = ../Images/image4txt.gif
image5 = new Image
image5.src = ../Images/blank.gif
        }
else
image1 = ""
image2 = ""
image3 = ""
image4 = ""
image5 = ""
document.textfield = ""
        }
// End hiding -->
</script>

This script defines an array of images that will be used in the mouseOver. The images are defined in the array in pairs. The first line image1 = new Image names the variable. The second line image1.src = ../Images/image1txt.gif provides the location of the specific instance of the variable.

Note that the variable name - new Image is the same for all five images.

Also, the entire array is enclosed in an if-else statement. The purpose of this construction is to provide browsers that cannot handle javascript a way to display the page without crashing. That's why the variable names are blank in this version of the array.

Here's what's in the <body> of the page:

<a href= "image1.html"
onMouseover="document.textField.src=image1.src"
onMouseout="document.textField.src=image5.src">
<img src="../Images/image1.gif" alt="Image 1" border="0" height="36" width="135"></a>

And here's what causes the new images to appear in the center of the table. They are targeted into the middle table cell by the <name> attribute:

<img src="../Images/blank.gif" alt="Blank image" name="textField" height="36" width="135">

Here are five images you can download to make your own complex mouseOver (the fifth one is white). These are the images that appear in the middle table cell:

mouseOver1 <-- image1txt.gif mouseOver3 <-- image3txt.gif
mouseOver2 <-- image2txt.gif mouseOver3 <-- image4txt.gif
mouseOver3 <-- This is the blank image
<--This cell is really empty

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu http://www.slis.indiana.edu/hrosenba/www/Demo/mouseOver.html