Highlighting Images

You are here: irt.org | Articles | JavaScript | Image | Highlighting Images [ previous next ]

Published on: Saturday 15th November 1997 By: Martin Webb

• Introduction
• Pre-loading the images from the network
• Trigger to change the image
• JavaScript function to change the images over

Introduction

Move your mouse over the images below:

If you are using Netscape Navigator 3+ or Microsoft Internet Explorer 4+ better then the image directly under the mouse should change.

You can reference the images in a document by using the images array. This array contains an entry for each Image object (<IMG> tag) in a document in source order (images created with the Image() constructor are not included in the images array). For example, if a document contains three images, these images are reflected as document.images[0], document.images[1], and document.images[2].

As well as referencing the images in the document using the images array, you can also reference them using the image name. For eample, if a document contains an image named as button, the image can be referred to as document.button.

There are three basic components:

Pre-loading the images from the network

Before we attempt to pre-load the images we must first check whether the browser supports the JavaScript images array and only pre-load images if it does:

if (document.images) {
  home0 = new Image();
  home0.src  = '../images/home0.gif';
  home1 = new Image();
  home1.src = '../images/home1.gif';
  ...

  ...
}

I have used images in the format image0.gif and image1.gif, where image0.gif is shown when the image is not highlighted, and image1.gif is shown when it is.

Trigger to change the image

This uses the onMouseOver and onMouseOut attributes of the LINK object (i.e. the <A> tag):

<a href="../home.htm"
  onMouseOver="change('homeA','home',1)"
  onMouseOut="change('homeA','home',0)"
  onClick="change('homeA','home',2)"
>
<img name="homea"
  width="47" height="13" border="0" alt="home"
  src="../images/home0.gif"
></a>

onMouseOver calls the change() function passing three parameters:

1. The NAME attribute of the <IMG> tag that the mouse is over.
2. The name of the pre-loaded image minus the '1.gif' postfix.
3. The type image to show i.e. '1' - highlighted.

onMouseOut calls the change() function passing three parameters:

1. The NAME attribute of the <IMG> tag that the mouse is over.
2. The name of the pre-loaded image minus the '0.gif' postfix.
3. The type image to show i.e. '0' - not highlighted.

JavaScript function to change the images over

The change() function sets the image shown by the <IMG> tag by changing the SRC attribute of the <IMG> tag:

function change(Name,Image,No) {
  if (!document.images) {}
  else document.images[Name].src = eval(Image + No + '.src');
}

Again, only if the browser supports the JavaScript images array.

Using separate parameters for the image name and image source and passing a parameter for the type of image to show in the change() function allows the same image to be shown more than once in the same document.

Multiple:

Reversed:

Mixed:

Linked:

Two images:

When the user clicks on an image it is possible to change the image whilst at the same time servicing the request to go elsewhere:

This is achieved by adding an onClick event to the HREF tag, and by preloading an extra image (in this case test2.gif):

<script language="JavaScript"><!--
if (document.images) {
    home0 = new Image();
    home0.src  = '../images/home0.gif';
    home1 = new Image();
    home1.src = '../images/home1.gif';
    home2 = new Image();
    home2.src = '../images/home2.gif';
}
 
function change(Name,Image,No) {
    if (!document.images) {}
    else document.images[Name].src = eval(Image + No + '.src');
}
//--></script>

<a href="nextPage.htm"
    onMouseOver="change('homeA','home',1)"
    onMouseOut="change('homeA','home',0)"
    onClick="return change('homeA','home',2)"
>
<img name="homeA"
    width="47" height="13" border="0" alt="Home"
    src="../images/home0.gif"
></a>

Related items

A JavaScript Picture Gallery

Speeding up image rollovers

Fading Images in and out

Controlling Images #2

Controlling Images

Image Maps

Toolbar Images

Random Banner Adverts

Highlighting Images (#2)

©2018 Martin Webb