| How to add... |
            |
| ...to your page. |
| How to add... |
| |
| ...to your page. |
(Run your cursor over the buttons. If you're using Netscape, they'll act
like buttons.)
v2.0
by Joe Barta
PROFESSIONAL WEB DESIGN
Hello! My name is Joe and I'm going to teach you how make Magic Buttons! Although it is done with JavaScript, I won't attempt to go into a detailed explanation of the coding involved. What I will do is give you some basic instructions, and have you fill in some blanks. If you want to learn the mechanics of the JavaScript I'll send you back to the Java & JavaScript resources page.
If you have succesfully used Magic Buttons with Netscape 3.0 and want to upgrade the script so it works with Netscape 4.0 also, then go here.
One more note... Microsoft's Internet Explorer doesn't support the JavaScript presented here. Since the scripting causes error messages in Explorer, we have added a filter that looks for Netscape Navigator. If your browser is something other than Netscape, you will see no special effects.
Ok, let's get to work. Here is a bare bones example of a magic button. It is a link. If you click on it you will be sent to another page.
The idea behind it is simple. Within this html document is a script. This script instructs the browser to do certain things. In the previous example the script said:
1. On loading, display this image-
2. When the cursor passes over that image, immediately swap it with this image- 
3. When the cursor moves off the image, replace it with the original image-
4. If the image is clicked, you will be transported to another page.
5. Repeat as necessary.
What we'll do now is build this effect step by step.
If your familiar with my other tutorials you know the affinity I have for Notepad. So crank up Notepad and a new Netscape window and we'll put this together. (As an alternative to Notepad, I'd like to suggest an outstanding text editor that I've been using an awful lot lately. It's called EditPad. It is made in Belgium by a talented young programmer named John Goyvaerts. You'll find it a highly functional and dependable text editor. It's absolutely free, although he would like a postcard from you if you like it.)
Start with this:
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Save this as magic.html in a new folder somewhere (Windows 3.x users save it
as magic.htm)
Next you'll need a couple images to play with. Save this one as clickme1.gif and this one as clickme2.gif.
Also, now would be a good time to make the target document...
<HTML>
<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>* TARGET *</H1>
</BODY>
</HTML>
Save this as target.html
You should now have a folder with four items in it: magic.html, target.html,
clickme1.gif and clickme2.gif.
Re-open magic.html and add the following...
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Note- notice that this goes within the <HEAD> tag, not in the <BODY> tags. All this does is provide a place to define some of the elements of the script while at the same time enclosing it in comment tags so that older or non JavaScript capable browsers won't display the coding.
Next insert a browser filter.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
This basically says- If the browser is Netscape Navigator, use the following script. If it is not Navigator, ignore the script.
I suppose that it would be possible to devise a script that would take Explorer's differences into consideration, but I haven't looked into it. I probably won't anytime soon so don't hold your breath. (Note- I have since looked into it and this type of script-based image swapping is just not possible with Explorer 3.0).
Keep in mind that although most people use Netscape, there is a minority out there that use something else. You may want to check your pages through one of these other browsers just to make sure that they can still navigate around.
Next, add the following. The green and blue text are the things that you plug in. Green is for the name and dimensions of the first image and blue is for the name and dimensions of the second image. Dimensions being (width,height).
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
We are done with the scripting in the <HEAD> tag.
Now we'll write the <IMG> tag. Note the IMG NAME in purple. Each spot that we put an image needs a unique name (or label) so when the script starts switching images around it knows exactly what image to put where. For this example img01 will do just fine. Also plug in the name of the first image and it's dimensions.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0>
</BODY>
</HTML>
All this does is display the image. Up until this point all we have done is to define a few variables and functions. We have "set the stage" if you will for some JavaScript commands.
Now add the link information and a little more JavaScript.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="target.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>
</BODY>
</HTML>
And there you have it!
Note- when you run a page with this type of scripting in it, you'll see that Netscape loads the images into memory. If you alter the image, save it, and hit Reload, your changes might not show. You can overcome this annoyance by clearing both your memory and disk cache whenever you modify an image (or whenever you think the browser has something stuck in memory). You do this by going to a plain page (such as target.html), then go to Options/Network preferences/Cache (Netscape Comunicator users go to Edit/Preferences/Advanced/Cache) and clear both the memory and disk cache. You then go to File/Open file (or page) in browser and load the page that way. I would imagine that there might be another way to do this, but this method seems to work very well.
Now, that was one button. Making more than one can get a little tricky. It is very important to keep things organized. It doesn't take much to generate the notorious JavaScript Error messages.
The variables we have thus far been using are as follows:
| clickme1 | - | the original image |
| clickme2 | - | the replacement image |
| img01 | - | the image label |
| target.html | - | the target document |
We will add a second "Magic Button" using the following variables...
| clickme3 | - | the second original image |
| clickme4 | - | the second replacement image |
| img02 | - | the second image label |
| target2.html | - | the second target document |
Save 
as clickme3.gif.
Save 
as clickme4.gif.
Save the following as target2.html
<HTML>
<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>* TARGET TOO! *</H1>
</BODY>
</HTML>
Add the variable statements to the scripting in the <HEAD> tag.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";
clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="target.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>
</BODY>
</HTML>
Now place the initial image.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";
clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="target.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>
<IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0>
</BODY>
</HTML>
Now add the link information and the JavaScript commands.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";
clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="target.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>
<A HREF="target2.html" onMouseOver="hiLite('img02','clickme4')" onMouseOut="hiLite('img02','clickme3')"><IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0></A>
</BODY>
</HTML>
Here is the same page with all of the plug-in variables highlighted. I wrapped a couple of the lines in <NOBR> (nobreak) tags so it would be easier to read.
<HTML>
<HEAD>
<TITLE>Magic Buttons!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version =
"1";
else version = "2";
// preload images:
if (version == "1") {
clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";
clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";
clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";
}
function hiLite(imgDocID,imgObjName) {
if (version == "1") {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>