- Two buttons:
First you need to create two versions of the
same button. One button represents the "off" state and the other button represents
the "on" state. Both buttons have to have the exact same
pixel dimensions or one of them will be resized by the browser. This
is not a good thing, it looks terrible. What I do is to make my off
button first then copy it a couple of times. I then mess around with
the graphics of the copies making several different versions of the "on" button.
This guarantees two identical sized buttons because you really do
have to go out of your way to resize a graphic.
- Two buttons swapped:
The below example swaps images when the cursor is over each button.
This code will work with NetScape Navigator 3.0 and higher and
Internet Explorer 3.01 (for Macintosh only) and Internet Explorer
4.0 for
all platforms. ALWAYS supply normal text links so folks with older
browsers or with their graphics turned off can navigate your pages.
First the script then the explanation.
< HTML>
<
HEAD><TITLE>Three Rollover Buttons</TITLE>
A <SCRIPT LANGUAGE = "JavaScript" type="text/javascript">
B <!--
C if (document.images) {
D img1on = new Image(); // Active
images
img1on.src = "imagelon.gif";
img2on = new Image();
img2on.src = "image2on.gif";
img3on = new Image();
img3on.src = "image3on.gif";
E img1off = new Image(); // Inactive
images
img1off.src = "imageloff.gif";
img2off = new Image();
img2off.src = ''image2off.gif'';
img3off = new Image();
img3off.src = "image3off.gif";
}
F function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
G function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
/ / _ _ >
< /SCRIPT>
< /HEAD>
<
BODY BGCOLOR="#FFFFFF">
H <A HREF = "page1.html"
I onMouseOver = "imgOn('img1')"
J onMouseOut = "imgOff('img1')">
<
IMG NAME = "imgl'' BORDER=0 HEIGHT=20 WIDTH=125 SRC="image1off.
gif"></A>
< A HREF = ''page2.html"
onMouseOver = "imgOn('img2')"
onMouseOut = "imgOff('img2')">
<
IMG NAME = "img2" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image2off.
gif"></A>
<
A HREF = "page3.html"
onMouseOver = "imgOn('img3')"
onMouseOut = "imgOff('img3')">
<
IMG NAME = "img3" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image3off.
gif"></A>
< /BODY>
< /HTML>
Now for the explanation of how the above code works:
A The browser needs to know what you are doing. This
statement defines your code as "JavaScript"
B Why comment out the code? You put JavaScript
code between the comment tags (<!
-- . . . //-->)
so that browsers that do not recognize JavaScript will ignore it. Savvy
browsers can
still read your code.
C The "If" statement is for browsers that support JavaScript
but do not support images objects. All the functions in this script
are contingent on the browser recognizing the images object. If "document.images" is
not recognized, the browser can not display the rollover effect.
D All of your graphics that depict the "on" state
of your buttons are preloaded into memory here and an image object
is created
for them.
E All
of your graphics that depict the "off" state of your
buttons are preloaded into memory here and an image object is created
for them. I only used 3 buttons in my working example on the Hobbies
page (at the time of this writing, there may be more now) but
to add more buttons just keep following the naming convention and
add more "on" and "off" statements
and corresponding button graphics. You may also check out the rollovers
on the Joke of the Week page.
F This is the function that activates
the button graphic and is called from your anchor tag. This function
refers to the name of your graphic
by the object name you gave it when you preloaded it into memory.
As the mouse cursor passes over the graphic the MouseOver event handler
passes the name of the image to this function. The function adds "on" to
the image object name.
G This function is the same as described
in comment "F" above
and handles the "off" graphics.
H This is the HTML for one of the buttons
within the <BODY> of
the document. There are actually two things happening here. First,
the button is assigned a name within the <IMG> tag.
JavaScript uses this name to refer to this particular graphic slot.
The actual
JavaScript commands, called event handlers, need to go within the
anchor <A> tag.
I This portion says to perform the "imgOn" function
when the mouse is over the graphic and it passes the image name to
that
function.
J This portion says to perform the "imgOff" function
when the mouse leaves the area of the graphic.
- Animate your rollovers!
"
Bu bu Bu Bu but it IS animated" you say, "it did something
when I rolled over it!" Well, have you thought of using an animated
GIF as your "imgOn" GIF? That didn't occur to me until
just recently and I wondered if it would work because I have never
seen
it done before (that I noticed anyway). I tried it out on the Site
Map page and it works great! Now normally I would completely
avoid such an obnoxious action by an animated GIF as you see on
the Site
Map page but consider this, it only animates when you provoke it
by rolling your mouse cursor over it. It is not constantly nagging like
a forth wife at the corner of your eyeballs to leave whatever important
work they are doing at the time to glance at it. So go nuts, do
something fun and wild but remember you don't want too much extra
baggage of
very big GIF files. Keep in mind that just by using rollovers,
you have doubled the download time of your graphics, making them
animated
rollovers is even worse.
Animated rollovers are easy to do. If you already have some rollovers
you have created, just replace the "imgOn" file with
an animated GIF of the same file name. That way
you do not have to touch a letter of JavaScript or HTML! If you
are creating a new rollover just follow
the tutorial above and create an animated GIF for each of the "imgOn" GIFs.
If you need it I have written a tutorial on creating
animated GIFs.
- That's it kids:
That is all you have do to add cool looking JavaScript rollovers
without blowing up a browser that is unable to display them. Of
course it
can get a lot more complicated than this but this is the basic
guts of even the most complicated of rollovers, if you can get
a grasp
of this you will easily understand the rest. The hardest part
of this is coming up with an idea then creating your graphic display.
The easiest part of this is the fact that you can just copy and
paste
the code up there into your web page. You kids got it easy let
me tell you, when I did rollovers I had to type them in by hand!
Before
that we used to punch the binary into concrete blocks with our
bare knuckles! Bah, you punks got it so easy... you all make me
sick.
|
