|
Highlighting Images (#2)
You are here: irt.org | Articles | JavaScript | Image | Highlighting Images (#2)
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.
View the profile on Martin Webb and the list of other Articles by Martin Webb.
|
|