Section 8: MouseOver Event and Image Properties

One very useful property of the document object is a list of all the images used in the document. They are referred to as follows:

document.images[0] <- the first image
document.images[1] <- the second image

and so on. Each of document.images[0], document.images[1], and so on is a so called image object, with its own set of properties, for example border, complete, height and so on. The following example loads an image into a document and then lists some of its properties.

<img src="cheese.gif" name="cHeeSy" border=7>

<script>
  document.write("<br><b>Has the first image finished loading yet?</b> ");
  document.write(document.images[0].complete);
  document.write("<br><b>What is its the URL?</b> ");
  document.write(document.images[0].src);
  document.write("<br><b>What is its name?</b> ");
  document.write(document.images[0].name);
  document.write("<br><b>How wide is the border around it?</b> ");
  document.write(document.images[0].border);
  document.write("<br><b>How tall is it?</b> ");
  document.write(document.images[0].height);
  document.write("<br><b>And how wide?</b> ");
  document.write(document.images[0].width);
  document.write("<br><b>Has it finished loading yet?</b> ");
  document.write(document.images[0].complete);
</script>

Follow this link to see this example in action.

The name property is especially important - it is inconvenient to refer to the images by number all the time. If we have given a name to the image, (as in the above example via the item name="cHeeSy"), then we can refer to each image by its name: so instead of saying

document.write(document.images[0].complete);, or
document.write(document.images[0].src);,

we could say

document.write(document.images["cHeeSy"].complete);, or
document.write(document.images["cHeeSy"].src);.

Some properties of an image object can be changed. Most particularly, the src property can be changed. Since the src property tells the browser what picture file to use for the image, this means that the picture can be completely changed, even after the page has been loaded! The following example uses setTimeout to change an image seven seconds after the page has finished loading.

<img src="cheese.gif" name="Cheesy" border=7>

<h3> Cheese! </h3>

<script>

function OldCheese() {
  alert("Your cheese is getting old!");
  document.images["Cheesy"].src = "oldcheese.gif" ;
}

setTimeout("OldCheese();",7000);

</script>

Here, the image "cheese.gif" is loaded, using the tag

<img src="cheese.gif" name="Cheesy" border=7> It is given the name "Cheesy" so that it is easier to refer to later.

The function OldCheese() warns the user (via the alert command) that the cheese is getting old, and then changes the images src property via the command

This will have the effect of loading a new image, and displaying it in place of the old one! The function OldCheese() will be run seven seconds after the page is loaded. Follow this link to see this example in action.

If make the image into the anchor for a link, via the <A> tag, we can use onMouseOver and onMouseOut to trigger the changes to the image. Consider the example below:

<script>

function OldCheese() {
  document.images["Cheesy"].src = "oldcheese.gif" ;
}

function NewCheese() {
  document.images["Cheesy"].src = "cheese.gif" ;
}

function SayYuk() { 
  alert("Yuk! Such Horrible Cheese!");
}
  
</script>

<a href="javascript:SayYuk()" onMouseOver="OldCheese()" onMouseOut="NewCheese()">
<img src="cheese.gif" name="Cheesy" border=7></a>

Here, three javascript functions are defined. OldCheese() will change the picture to the old piece of cheese. This will be activated whenever the user moves the mouse Over the link (that is, the picture), because of the phrase onMouseOver="OldCheese();" within the <A> tag.

The function NewCheese() will change the picture back to the new piece of cheese. This function will be activated whenever the user moves the mouse Out of the link, because of the phrase onMouseOver="OldCheese();" within the <A> tag.

Finally, if the user decides to click on the link instead of moving away, the function SayYuk() will be called. This is because of the phrase HREF="javascript:SayYuk();", also within the <A> tag.

The function SayYuk() tells the user that their taste in cheese is rather disgusting.

Follow This Link to see this example in action. Many professionally made pages use onMouseOver and onMouseOut in exactly this way, on their pages. In example 8d (below) we use a TABLE to hide the blue border that comes from making the picture a link, and then place a number of pictures into the table. Each picture is a link to another page, and each one has its own onMouseOver and onMouseOut to attract the user's attention or give them information about what they are about to do.

First, let's look at how the images are placed on the page:

<CENTER>
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0>
<TR>
<TH><a href="eg7a.html" onMouseOver="MovedOn('7a')" onMouseOut="MovedOff('7a')"><IMG
SRC="offeg7a.gif" NAME="example7a" BORDER=0></a></th>
<TH><a href="eg7b.html" onMouseOver="MovedOn('7b')" onMouseOut="MovedOff('7b')"><IMG
SRC="offeg7b.gif" NAME="example7b" BORDER=0></a></th>
<TH><a href="eg7c.html" onMouseOver="MovedOn('7c')" onMouseOut="MovedOff('7c')"><IMG
SRC="offeg7c.gif" NAME="example7c" BORDER=0></a></th>
</TR>
<TR>
<TH><a href="eg8a.html" onMouseOver="MovedOn('8a')" onMouseOut="MovedOff('8a')"><IMG
SRC="offeg8a.gif" NAME="example8a" BORDER=0></a></th>
<TH><a href="eg8b.html" onMouseOver="MovedOn('8b')" onMouseOut="MovedOff('8b')"><IMG
SRC="offeg8b.gif" NAME="example8b" BORDER=0></a></th>
<TH><a href="eg8c.html" onMouseOver="MovedOn('8c')" onMouseOut="MovedOff('8c')"><IMG
SRC="offeg8c.gif" NAME="example8c" BORDER=0></a></th>
</TR>
</TABLE>
</CENTER>

First we have a <CENTER> tag to ensure that our snazzy table appears in the place we want it. Then, in the <TABLE> tag, we find these three statements: CELLSPACING=0, CELLPADDING=0BORDER=0. All these help to ensure that the actual TABLE is invisible, and that all the user sees is the pictures we will place inside the cells of the table.

And that's it! Once the required pictures have been created (I made mine using Microsoft Paint and converted them to GIF using Microsoft Photo Editor), and once the functions MovedOn(x) and MovedOff(x) have been defined, this HTML code will display a really cool table full of links which light up as the mouse moves over them! Follow this link to see this example in action.

<script>

function MovedOff(x) {
  document.images["example"+x].src = "offeg" + x + ".gif" ;
}

function MovedOn(x) {
  document.images["example"+x].src = "oneg" + x + ".gif" ;
}

</script>