First of all, you need two graphic buttons. Both graphic buttons
need to be the same dimensions. When the mouse passes over the first
button, the image is swapped for the second button that looks different.
In this case, the first button is raised and the second is inverted.
The result is an illusion; giving the appearance that the button is being
So let's say you have two graphic buttons: one named "up.gif"
and one named "down.gif". And let's say you want the
same illusion (have one button appear to be pressed in when the mouse rolls
over it). First of all, decide which graphic button you want on the
page when the page first loads into the browser. In this case, you
would want the "up.gif" graphic button on the page first.
So add the up.gif image to the page with the following HTML tag:
src="up.gif">. Adding the
width and height attributes would help the image load quicker. So
if the image is 120 pixels wide and 65 pixels in height (as is the case
with the white button above), you would add these attributes to the tag
like so: <img
src="up.gif" height=65 width=120>
Now link the graphic button to a page or a site that you desire.
Let's say you want to link the button in this case to KMart. So your
tags would now look like:
<img src="up.gif"> </A>
Keep in mind that anytime you link an image to a website you will get a
border around the image unless you specify otherwise. To remove the
border, add the following attribute to the img tag:
Now you have the basic tags there to make this happen.
The command to swap the up.gif image with the down.gif image is called
into the anchor tag:
" onMouseOut="document.pic1.src='down.gif' "
What does what I just typed in mean?
OnMouseOver= (This is referred to as
of passing a mouse over an object.)
the event to the current document and is necessary in order for the mouseover
the name of the mouseover. Instead of "pic1" you can have any name you
choose, just be certain to apply the name to the mouseover three times:
for the onMouseOver, onMouseOut, and within the <img... tag.)
attribute of the tag allows you to determine which graphic to display when
the mouse rolls over the image set in the IMG tag.)
Now look at the img tag. In order for the OnMouseOver event to be
associated with this particular image, you need to add a NAME="pic1"
attribute to the <img... tag. Remember
instead of "pic1" you can have any name you choose; you could use "larry",
"curly", and "mo" if it makes more sense to you. Just make certain
that for every image that you choose to apply a mouseover to on the same
page, that each has a different name (and that name needs to be
applied three times within each set of tags: to the mouseover, mouseout,
and img src). If you choose to use the "pic1" for the first mouseover,
then for another mouseover on the same page, you could have "pic2" then
for the next, "pic3", and so on.