A popular technique for adding a little spice to your pages is
the Image Flip Mouseover. Using JavaScript, you can easily
install this effect in your pages.
Please keep in mind that as with most things beyond straight HTML,
this will not work with all browsers. It should work with
MSIE-4 and Netscape-3 & 4.
This tutorial will split the task into three ingredients:
The Images
The Script
The Links <A HREF> tags
In the box below you will see two
rather typical looking link graphics. If you take your mouse
pointer and run it over them, you should see an effect that
looks like a light being turned on inside the image. Don't worry,
we are using high efficiency graphics to avoid energy waste.
Cut & Paste? Of course! Just be sure to cut from the screen
and NOT from view source.
Please try to get the script as shown working before making any
changes. This can save you a little extra frustration! Instructions
for customizing will be at the end of the tutorial.
The Stars of Our Show!
Run your mouse over them...
INGREDIENT #1: THE GRAPHIC FILES
These are the graphics that we will be using in our tutorial
script. The images with the B in their names are the ones
displayed when the mouse passes over them. The ones without
the letter B are displayed otherwise.
Advice: It is very important to keep in mind that using
this technique involves your reader downloading two graphics
for each and every image flip link. You should therefore try
and keep each image as small as possible. Always balance how
long your reader has to wait vs. the value of the desired effect!
In picking your graphics, make sure that your on/off set for
any link are of the same exact height and width. This does not
mean that all of your buttons have to be the same size, but
each pair must be to avoid distortion.
JOIN.GIF
JOINB.GIF
LOGON.GIF
LOGONB.GIF
658 bytes
2215 bytes
791 bytes
2291 bytes
Each image is 25 pixels HIGH by 88 pixels wide.
INGREDIENT #2: THE SCRIPT
This section contains our actual script source code. The script
once modified for your needs should be pasted into the
part of your page between the <HEAD> and </HEAD>
tags. If your page already has these tags, do not include the
<HEAD> and </HEAD> in the source below.
In this page, the script is inserted directly under the page's
<TITLE>.
If you are uncertain as to where the <HEAD> and </HEAD>
tags go, here is a quick reminder:
<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
HOW IT WORKS
The script starts off by checking to see if you have a browser
capable of running this script. If not, it will be ignored by
the browser, otherwise, the script and extra images are loaded
and will be ready for when the mouse passes over a script controlled
link.
When the mouse pointer passes over the image, the BNB_mouseon
subroutine (mini-program) will display the image located in the
section //MouseOn which if you notice, all have variable names
ending with 1. i.e., login1 and login1.src
All of the variable names ending with 0 are displayed
when the mouse leaves the image. If this were not done, an
image once selected, would forever remain selected. Okay, at least
until you go to another page or turn off the computer.
<HEAD>
<script language="JavaScript">
<!--
browsok = (((navigator.appName == "Netscape")
&& (parseInt(navigator.appVersion) >= 3))
|| ((navigator.appName == "Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion)>=3)));
if(browsok){
// MouseOn
// Note: the 88 is for the WIDTH, 25 is for the HEIGHT
login1 = new Image(88, 25);
login1.src = "LOGONB.GIF";
join1 = new Image(88, 25);
join1.src = "JOINB.GIF";
// MouseOff
// Note: the 88 is for the WIDTH, 25 is for the HEIGHT
login0 = new Image(88, 25);
login0.src = "LOGON.GIF";
join0 = new Image(88, 25);
join0.src = "JOIN.GIF";
}
function BNB_mouseon(n){
if(browsok){
imageON = eval(n + "1.src");
document [n].src = imageON;
}
}
function BNB_mouseoff(n){
if(browsok){
imageOFF = eval(n + "0.src");
document [n].src = imageOFF;
}
}
// -->
</SCRIPT>
</HEAD>
INGREDIENT #3: THE LINKS
The final part step to installing our script is to place the
links where we want them in our HTML document. Here are the
key points about the links:
href is the page (or full URL) you want to link to
The IMG SRC is the graphic you want to display when
the mouse is not over the graphic. (off)
The login between the ' ' marks relates to the
names of the variables in the script, i.e. login0 and login1
As you can see, this step is no more difficult than plugging in
a graphic image link, other than a little extra typing.
CUSTOMIZING THE SCRIPT FOR YOUR SITE
Once you have the the script working, you will know you have a
working installation and can start making modifications. Here
is all you have to do:
1. Select Your Graphics
Actually, you could say this is Step #0. You will need
to pick out graphics for your image flips. In our example script
the WIDTH=88 and the HEIGHT=25.
Unless you make your graphics
that exact size, please measure your graphics and change the
values in every place they occur in the script and links. If you
do not do this, your graphics will be mushed and otherwise
distorted. Since this is an excercise in vanity, let's be fully
vain.
Keeping in mind that all the graphics will need to be downloaded
by your viewer, please try to keep each image as small as possible.
2. Add to the MouseOn List
The MouseOn List are the variables or names ending with the
numeral 1. If you want to create a link using the name
mylink, you would add the following two lines to the
section named //MouseOn
mylink1 = new Image(88, 25);
mylink1.src = "mypicb.gif";
3. Add to the MouseOff List
The MouseOff List is set up the same way as the MouseOn
list, except the names end with the numeral 0. Continuing
with our mylink addition, you would add to the //MouseOff
section the next two lines:
mylink0 = new Image(88, 25);
mylink0.src = "mypic.gif";
4. Create Your Link
Now that the MouseOff and MouseOn lists have been added to, we
are on the home stretch. Create a link in your HTML document where
it is needed using the following as a guideline:
