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>

  document.write("<br><b>Has the first image finished loading yet?</b> ");
  document.write("<br><b>What is its the URL?</b> ");
  document.write("<br><b>What is its name?</b> ");
  document.write("<br><b>How wide is the border around it?</b> ");
  document.write("<br><b>How tall is it?</b> ");
  document.write("<br><b>And how wide?</b> ");
  document.write("<br><b>Has it finished loading yet?</b> ");

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

we could say

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

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>


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



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

document.images["Cheesy"].src = "oldcheese.gif" ;

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:


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

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

function SayYuk() { 
  alert("Yuk! Such Horrible Cheese!");

<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:

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

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.

The <TR>...</TR> tag tells the browser that we are defining a row of the table. Then, within each row, there are three <TH>...</TH> tags, so that the row is three cells across.

Each cell contains a <A>...</A> tag. This tag causes the cell to become a link (via, for example, HREF="eg7a.html") to another page somewhere. It also defines event handlers onMouseOver="MovedOn('7a')" for what happens when the mouse moves over the link, and onMouseOut="MovedOff('7a')" for what happens if the user moves the mouse away from the link again. The functions MovedOn(x) and MovedOff(x) must be defined by us. We will have a look at how to define them in just a moment.

Finally, the actual link itself is just an image (no text), defined by the <IMG> tag. Here, some properties of the image are specified, most importantly, SRC="offeg7a.gif", the (initial) URL of the image, and NAME="example7a" to make the image easier to refer to later. There also appears BORDER=0. This is also to ensure that no "gaps" appear between the images in the table, so that we see only the images themselves, not the table that contains them.

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.

As for the functions MovedOn(x) and MovedOff(x), the code for them is given below:


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

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


So, for example, if the command MovedOn('8b') were issued (for example, as the onMouseOver event handler for one of our links), then inside the function, x has the value "8b", so that the command

document.images["example"+x].src = "oneg" + x + ".gif";

translates to

document.images["example8b"].src = "oneg8b.gif";

This will therefore change the appearance of the image whose name is "example8b", to whatever the picture "oneg8b.gif" looks like.

This effect, if the pictures are chosen well, can look very very professional. Just make sure (at least) that all your pictures are the same size!