Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

The Book of the Day Script

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

Highlighting Images (#2)

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

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

Introduction

This article describes how to enhance the previous Highlighting Images article.

The Image array which facilitates the changing of images on the onMouseOver and onMouseOut events is currently only supported in Netscape Navigator 3+ and Microsoft Internet Explorer 4+.

JavaScript *.js Source Files

Another facility that is only supported in Netscape Navigator 2+ and Microsoft Internet Explorer 4+ is the SRC attribute of the <SCRIPT> tag. However, some releases of Microsoft Internet Explorer 3.x supported some aspects of JavaScript *.js source files.

We can combine these two facilities to place the JavaScript code needed to support Highlighting Images in the SRC file, as this JavaScript code isn't required by any other browser, this then reduces the size of the main documents that use Highlighting Images.

Rather than detect the version and browser type, it is easier to check to see if the images property of the document exists. If is doesn't we continue as normal, if it does then will allow image highlighting.

First place the JavaScript code to preload the images within the a .js file e.g. images.js:

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

  jscript0 = new Image();
  jscript0.src  = 'images/jscript0.gif';
  jscript1 = new Image();
  jscript1.src = 'images/jscript1.gif';
  jscript2 = new Image();
  jscript2.src = 'images/jscript2.gif';

  guest0 = new Image();
  guest0.src  = 'images/guest0.gif';
  guest1 = new Image();
  guest1.src = 'images/guest1.gif';
  guest2 = new Image();
  guest2.src = 'images/guest2.gif';

  feed0 = new Image();
  feed0.src  = 'images/feed0.gif';
  feed1 = new Image();
  feed1.src = 'images/feed1.gif';
  feed2 = new Image();
  feed2.src = 'images/feed2.gif';

  notify0 = new Image();
  notify0.src  = 'images/notify0.gif';
  notify1 = new Image();
  notify1.src = 'images/notify1.gif';
  notify2 = new Image();
  notify2.src = 'images/notify2.gif';

  links0 = new Image();
  links0.src  = 'images/links0.gif';
  links1 = new Image();
  links1.src = 'images/links1.gif';
  links2 = new Image();
  links2.src = 'images/links2.gif';
}

Then place the following within the <HEAD> tag of the required page:

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

<script language="JavaScript" SRC="images.js"></script>

The change() function has to remain within the main document as the onMouseOver event is supported by Internet Explorer 3 and Netscape 2.

The check for the browser is also required within the main document as this is needed by the change() function.

All that is then needed is the links which use the onMouseOver and onMouseOut events:

<table
  width="100%"
  height="20"
  cellpadding="5"
  cellspacing="0"
  border="0"
  bgcolor="#000000"
><tr height="30">

<td
  align="center"
>
<a
  href="guest.htm"
  onMouseOver="change('JavaScriptA','jscript',1)"
  onMouseOut="change('JavaScriptA','jscript',2)"
  onClick="change('JavaScriptA','jscript',2)"
>
<img
  name="JavaScriptA"
  width="101"
  height="13"
  border="0"
  alt="JavaScript"
  src="images/jscript0.gif">
</a>
</td>

<td
  align="center"
>
<a
  href="guest.htm"
  onMouseOver="change('guestA','guest',1)"
  onMouseOut="change('guestA','guest',2)"
  onClick="change('guestA','guest',2)"
>
<img
  name="guestA"
  width="101"
  height="13"
  border="0"
  alt="guest"
  src="images/guest0.gif">
</a>
</td>

<td
  align="center"
>
<a
  href="feed.htm"
  onMouseOver="change('feedA','feed',1)"
  onMouseOut="change('feedA','feed',2)"
  onClick="change('feedA','feed',2)"
>
<img
  name="feedA"
  width="101"
  height="13"
  border="0"
  alt="feed"
  src="images/feed0.gif">
</a>
</td>

<td
  align="center"
>
<a
  href="notify.htm"
  onMouseOver="change('notifyA','notify',1)"
  onMouseOut="change('notifyA','notify',2)"
  onClick="change('notifyA','notify',2)"
>
<img
  name="notifyA"
  width="101"
  height="13"
  border="0"
  alt="notify"
  src="images/notify0.gif">
</a>
</td>

<td
  align="center"
>
<a
  href="links.htm"
  onMouseOver="change('linksA','links',1)"
  onMouseOut="change('linksA','links',2)"
  onClick="change('linksA','links',2)"
>
<img
  name="linksA"
  width="101"
  height="13"
  border="0"
  alt="links"
  src="images/links0.gif">
</a>
</td>

<td width=100%> </td>

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

</tr>
</table>

NOTE: The location of the images, src and/or the target html files may need to be adapted if their relative location is in a parent directory by adding the ../ prefix, or if within a sibling directory by adding the ../sibling_directory_name/ prefix.

Related items

The Book of the Day Script

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

©2018 Martin Webb