Java
  GuestBook
  Security
     Explorer
     Netscape

JavaScript
  Mouse Over

Layers
  Menu

Windows
  File Types

Highlighting Images

This page describes how to highlight images that represent links. This kind of feature is commonly seen on cool pages, but is often difficult to do. I have taken the time to make a script to make it as easy as possible to insert this cool feature into you page.

Here is an example of the HTML you would write. 

    <SCRIPT Language="JavaScript">
      MouseOver("aboutus-a.gif","aboutus-b.gif","border=0", "/about.html");
    </SCRIPT>

and here is the output:

Function Definitions

    MouseOver(image1, image2, imageFlags, URL);

    MouseOverLong(image1, image2, imageFlags, URL, hrefFlags, statusMessage);

    • image1 - the default image .. can be any URL
    • image2 - the mouse Over image .. can be any URL
    • imageFlags - parameters to img tag, examples include WIDTH=100, and BORDER=0
    • URL - where do you want them to go when they press the button?
    • hrefFlags - similar to imageFlags, examples include "Target='_top'"
    • statusMessage - what will appear in the status bar when the mouse is Over. Use "null" if you don't want a message.

How To

First you need two images. This images should be the same size! If they are not, then the size of the first image will be used. There is no way to get around this. The best way is the 'pad' (add space around the edges) the images until they are the same size.

Then you need to include the file MouseOver.txt into your HTML file. This file has the functions required to do the modifications to the image.

Now follow one of the examples, to get the desired features:
Alt Tag and image size (recommended)
  <SCRIPT LANGUAGE="JavaScript">
    MouseOver("aboutus-a.gif","aboutus-b.gif",
    "width=165 height=26 border=0 alt='About Us'",
    "/about.html");
  </SCRIPT>
 
Recommended + status Message
  <SCRIPT LANGUAGE="JavaScript">
    MouseOverLong("aboutus-a.gif","aboutus-b.gif",
    "width=165 height=26 border=0 alt='About Us'",
    "/about.html","","Click to find out about Outsource Labs");
  </SCRIPT>
 
Alt Tag and new TARGET - appears in new window
  <SCRIPT LANGUAGE="JavaScript">
    MouseOverLong("aboutus-a.gif","aboutus-b.gif",
    "border=0 alt='About Us'",
    "/about.html","TARGET='_new'","null");
  </SCRIPT>
 
Image Size and onClick function
  <SCRIPT LANGUAGE="JavaScript">
    MouseOverLong("aboutus-a.gif","aboutus-b.gif",
    "border=0 width=165 height=26 alt='About Us'",
    "/about.html",
    "onClick='window.alert(\"About us was Clicked\")'"
    ,"null");
  </SCRIPT>
 
Tested on:
Solaris: Netscape 4.02, 3.02, Netscape 2.02 (feature not supported)
PC: Netscape 4.03, Netscape 3.01, Netscape 2.02 (feature not supported)

The information on these pages are provided on an "AS IS" basis, and may be used freely at your own risk. Addition usage information found on each particular page.
olabs@olabs.com