Articles | Highlighting Images #2 |  back 

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="guestbookfile1.htm" onMouseOver=
"change('guestA','guest',1)" onMouseOut=
"change('guestA','guest',0)" onClick="change('guestA','guest',2)">
<img name="guestA" width=66 height=13 border=0 alt=
"View Guestbook" src="images/guest0.gif"></a></td>
<td align=center><a href="utility/feedback.htm" onMouseOver=
"change('feedA','feed',1)" onMouseOut="change('feedA','feed',0)" onClick=
"change('feedA','feed',2)">
<img name="feedA" width=87 height=13 border=0 alt="Feedback" src=
"images/feed0.gif"></a></td>
<td align=center><a href="notify.htm" onMouseOver=
"change('notifyA','notify',1)" onMouseOut=
"change('notifyA','notify',0)" onClick="change('notifyA','notify',2)">
<img name="notifyA" width=58 height=13 border=0 alt="Notify" 
src="images/notify0.gif"></a></td>
<td align=center><a href="utility/links.htm" onMouseOver=
"change('linksA','links',1)" onMouseOut=
"change('linksA','links',0)" onClick="change('linksA','links',2)">
<img name="linksA" width=47 height=13 border=0 alt="Links" src=
"images/links0.gif"></a></td>
<td width=100%> </td>
<td align=center><a href="index.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></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.

Articles | Highlighting Images #2 |  back

 

 
Menu

Home
Articles
FAQ's
Links
Tools
 Blog Links
AJAXCoded Blog
CyberCoded.net
CyberCoder
CybersView

Applications

 

Questions, Comments
or Suggestions

Site Search
FAQ Search

AJAX Coded
CAAD @ CyberCoded.net


 
Copyright

Google
WWW CyberCoded.com
Provide Feedback on CyberCoded.com

Copyright © 1996-2008 CyberCoded.com, All Rights Reserved.
CyberCoded.com liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public privacy statements.
Website Hosted By: USNX

We recommend USNX for quality ASP Web Hosting