Mitzrah's Get IT Right Column!! Making Link Plates - Section 2 Updated : Friday, August 07, 1998

This tutorial will help you set up cool on/off buttons like the one I use for my navbar. What happens is that if you hover above my navbar buttons the image will change to a different one! Too bad this nifty thing doesn't want to work on Internet Explorer 3. So they are missing out on a lot! In this tutorial we have 3 buttons as an example. You can always put more buttons in if you like to, explained later.

• The words in RED will the the ones you can ALTER.
• Do not alter the ones in orange or there will be severe JAVAscript errors,
• Also please have a backup of whatever files you are altering!
• The HTML codes are below.
• Please remember that all JAVAscripts should optimally be placed just before the </body>tags.

<script LANGUAGE="Javascript">
<!--
browserVer = parseInt(navigator.appVersion);
browserName = navigator.appName;
if (browserVer >= 4) {
version = "v4";
}
else {
if (browserName == "Netscape" && browserVer >=3) {
version = "v4";
}
else {
version = "v3";
}
}

if (version == "v4") {
button1on = new Image();
button1on.src = "button1_on.jpg";
button2on = new Image();
button2on.src = "button2_on.jpg";
button3on = new Image();
button3on.src = "button3_on.jpg";

button1off = new Image();
button1off.src = "button1_off.jpg";
button2off = new Image();
button2off.src = "button3_off.jpg";
button3off = new Image();
button3off.src = "button3_off.jpg";

}

function img_on(imgName) {
if (version == "v4") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}

function img_off(imgName) {
if (version == "v4") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
//-->
</script>
</head>

---

NOTES on JAVAscript:

1. If you need more buttons, just add append (add on) these lines:
   buttonXon = new Image();
   buttonXon.src = "buttonX_on.jpg";
   
   Where X will be a unique number, assigned to that button.
   
2. Also do not forget these lines too!
   buttonXoff = new Image();
   buttonXoff.src = "buttonX_off.jpg";
   
   Where X will be a unique number, assigned to that button.

---

Your links will then have to adopt this format:

• Again pay attention to the RED bits as they are the ones you CAN alter.
• DO NOT alter anything else unless you are really confident on your HTML.

<p>
<a HREF onMouseOver="img_on('button1');window.status='status bar message here';
return true" onMouseOut="img_off('button1');window.status=''">
<img SRC="button1_off.jpg" NAME="button1" WIDTH HEIGHT BORDER="0"
ALT="Alternative message for graphic here"></a><br>
<a HREF onMouseOver="img_on('button2');window.status='status bar message here';
return true" onMouseOut="img_off('button2');window.status=''">
<img SRC="button2_off.jpg" NAME="button2" WIDTH HEIGHT BORDER="0"
ALT="Alternative message for graphic here"></a><br>
<a HREF onMouseOver="img_on('button3');window.status='status bar message here';
return true" onMouseOut="img_off('button3');window.status=''">
<img SRC="button3_off.jpg" NAME="button3" WIDTH HEIGHT BORDER="0"
ALT="Alternative message for graphic here"></a><br>
</p>

---

The HTML codes:

1. If you have added more buttons, then you need to add the following HTML as well.
   <a HREF onMouseOver="img_on('buttonX');window.status='status bar message here';
   return true" onMouseOut="img_off('buttonX');window.status=''">
   <img SRC="button1_off.jpg" NAME="buttonX" WIDTH HEIGHT BORDER="0"
   
   Where X will be a unique number, assigned to that button.

---

HINTS & TIPS:

• Try very hard to spot the trend as in this JAVAscript the trend is already there, it doesn't take a keen eye to watch out for the repeats in the code.
• In addtion to that, be very careful with what you do,
• Again, I would like to stress the importance of backing up your HTML files.
• You also will need to PREVIEW the file as mentioned above before uploading it to the web page.
• I bid you good luck! And persevere, nothing comes without perseverence.

Notes from Alex:

If you found my tutorial helpful, please drop a note by my guestbook! So I know that you have dropped by and benefitted from my efforts, it took me quite sometime to get these tutorial up! Click on home and then SIGN GUESTBOOK! I will also visit your homepage at GeoCities and sign your guestbook if you sign mine!

[ Emiri Nakayama | Sailor Mars, Rei | About Me | Photo Gallery ] [ WWW Resources | HTML Tutorials | Hints & Tips | Banner Exchange ] [ Awards | Win My Award | Home | Links | Change Music | E-Mail Me ]

LinkExchange Member

Free Home Pages at GeoCities