Hi-Lighting Menus

--oo00oo--

What does it do? This is a neat little JavaScript function. It sits at the top of your page and allows you to change an image when the mouse moves over it. You can see an example of a similar script by clicking on the home button in the top left of this page.

Note, this only works with IE4+, & NS3+ But makes no difference to older browsers, so it's worthwhile having as a side feature to your page.

The Script You need to copy and paste the following into the HTML of your page. If using FrontPage, make sure you choose to view the HTML. Ideally it should be the first thing after the <body> tag.

<script language="JavaScript"><!--
function tocItem (name, width, height) {
this.on = new Image();
this.on.src = name + "on.gif"
this.off = new Image();
this.off.src = name + "off.gif"
}

function toc_new (name) {
tocItem[name] = new tocItem(name);
}

function img_act (imgName) {
if (document.images) document[imgName].src = tocItem[imgName].on.src;
}

function img_inact (imgName) {
if (document.images) document [imgName].src = tocItem[imgName].off.src;
}



if (document.images != null){
toc_new('bus');
toc_new('appoint');
toc_new('cvs');
toc_new('info');
toc_new('contact');
}

function nothing() {

}
// --></script>
Using the script Ok, it looks quite daunting! But it's easy to use. First, you have to decide on the names of your images. For each image you want to add the roll over effect to you have to create 2 versions. The first one, the off image is the one you will insert into your page. The file name must end in off. The second image, the on image, must have an identical file name, but end with on. Both must be gif files and stored in the same directory.

When you have got all of your images, you need to modify the section of this script which currently reads :
toc_new('bus');
toc_new('appoint');
toc_new('cvs');
toc_new('info');
toc_new('contact');

Insert the names of your images replacing bus, appoint etc.

Next, insert the off image into your web page. Next, link it using an <A HREF> tag.

Now you need to get your hands dirty. If you've not already got a HTML view, then you need to view the source code. Locate the first of your images. In the <IMG> tag, insert the following : name="your image name goes here". This name must be the same as your file name minus the off.

The next step is to add the following inside the <A HREF> tag. Add onmouseover="img_act('your image name')" onmouseout="img_inact('your image name')".

Replace your image name as appropriate. Repeat the steps for each image.

Save and load your work in your browser. Hey presto!