You are here: irt.org | Articles | JavaScript | Image | Highlighting Images (#2) [ previous next ]
Published on: Saturday 15th November 1997 By: Martin Webb
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+.
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.