One of the questions I've gotten a lot is 'how do you make those buttons change?'. Javascript is often hard to figure out if you don't have a programming background, and often if you're looking at it, it's hard to read. Here's an example of some code that does button changing, with an explanation of how it does it. Here's the button - try moving your mouse over it:

First, you need to create 2 new images, in order to make the effect of a change. Here are the two images used in the above example:

first button second button

Below, you'll see the code that handles this little change. Ignore the numbers; they are not part of javascript; they're so I can explain things by referring to the lines. 


01: <SCRIPT LANGUAGE="JavaScript">
02: <!-- Beginning of JavaScript -
03:
04: var version = 0;
05: var version = parseInt(navigator.userAgent.substring(8,9));
06:
07:        if (version >= 3) {    
08:        activefirst= new Image();
09:        activefirst.src= "button2.gif"; 
10:        }
11: 
12: // - End of JavaScript - -->
13: </SCRIPT>

This code should go entirely in your ‹HEAD›, before you start the body of your text.

Line 01 lets the browser know it's a script, and which language it is going to use.

Line 02 hides the script from older browsers that don't understand the ‹SCRIPT› tag.

Line 04 defines a variable, VERSION, and sets it to be equal to 0.

The next line, 05, takes a quick peek at the browser type, and sets the version to be equal to the number it finds in the browser (if you're interested in exactly what it's doing, it's time for you to buy a book ;-)

Line 07 checks the new VERSION, and if it is greater than 3, it performs the next few lines. If it is not, it doesn't do anything; so it doesn't break browsers that can't do the image replacement.

Line 08 defines a new image - in this case, naming it 'activefirst'. You can name the variable anything you want, as long as you name it consistantly in the next line and in the mouseover code you'll see below.

Line 09 adds a SRC to the new image (pretty much the same as when you add a SRC to the ‹IMG› tag in HTML). The effect of these lines is just to load the image ahead of time. If you don't have these lines, the image doesn't load until the mouse is moved over the original image, and that's not much good; they may well have clicked by the time the image loads. To load several images, repeat lines 08 and 09 repeatedly, with different names.

Line 10 Closes off the IF statement

Lines 12 and 13 end the comment that was keeping it hidden from older browsers, and the script.

That takes care of the script in the code. Now you need to teach the image to change when the mouse moves over it. Here's the code used on this page: 


<A HREF="mailto:thespian@sleepingcat.com" onMouseOver="if (version >= 3)
 firstexample.src = activefirst.src; return true" 
 onMouseOut = "firstexample.src = 'button1.gif'">
<IMG SRC="button1.gif" WIDTH="104" HEIGHT="60" NAME="firstexample" BORDER=0>
</A>

Now, to break that down. You have an image, acting as a link; pretty standard. the only thing that's different about it is you give it a NAME, so you can refer to it in the link tag. If you read over the link, you might be able to figure out what it's doing.

First in the link, we find the HREF, totally standard. then comes onMouseOver. This is checking to see if the version is over 3, using the same variable we defined in the script, VERSION. If it's greater than 3, then we change the image. In this case, 'firstexample' is the name we assigned to the image, so we refer to the image source with firstexample.src. activefirst.src is the image we preloaded in the script. When you move the mouse over the image, it changes the source of 'firstexample' to be 'activefirst'. Then we have the onMouseOut, which returns the image to the first image you had loaded.

Javascript buttons take a little playing with, just like any other HTML, to become totally comfortable, but they are a nice, interactive touch to a feel, and worth experimenting with. I recommend you play with them to get fully at ease. Once you have mastered them, take a look at my advanced page in order to see some examples of using the same basic button script to do some cool stuff. If you have any questions, or suggestions about this page, please mail me.

searchworkstufffun stuffwhat's newfeedbackabout ushome
all images and content © 1996, 1997, 1998, sleeping cat.