OnMouseOver

Sounds like some kind of secret code from a spy movie, doesn't it?

Well... if you are here... you must want to learn how to do this cool effect! Well, you've come to the right place! Here are the menu buttons again, you can click them if you want:

kitten kitten2 centaur

Okay, well, your mouseovers don't have to be quite THAT boring. To see some other ones that I've done you can peek at my Athens site, or within the athens site is a fairly odd one at my Centaurs main page. My Christmas Page uses them quite a lot, and my commercial web page has a simple set. Even a page i'm working on for a friend uses them.

So, now that you've seen just some of the things that mouseovers can do, you probably want to make some for yourself, only more sophisticated.

Lesson One

The first thing with the onmouseovers, is that you have to have two pictures, one for when the mouse isn't over the button, and one for when it is over the button:

Okay, so now you have your images that you made in some paint program, or that someone gave you, or whatever, you are ready for the next step.

This step is a little more complex, because you have to take the code i'm going to give you, and you have to change it. For the effects I have above you can click here to see the stuff that has to go in the "head" portion of your html document. It is best to "cut and paste" the code from this page. The Sample code I use on this page is merely for sample purposes, and may give your browser a heart attack.

Okay, did you click the link? Have you seen the code? Good! Now I will demonstrate what to do with that code.

Okay, now you've cut and pasted the code from that text file into your html document. You've put it after the <Head> and before the </Head> tags, right? Good. Now you have to go in and change it around. Remember that you can only change those portions that are relevant. If you change anything else, it won't work. I speak from the experience of hours of frustration, so make sure that you only change the proper portions.

After the first script tag you see this:

<!--
function load_images() {
var image1 = new Image();
aaon.src = 'a1.gif';
aaoff.src = 'a2.gif';
abon.src = 'b1.gif';
aboff.src = 'b2.gif';
acon.src = 'c1.gif';
acoff.src = 'c2.gif';
} //-->

This is the part that loads the images up. the part in the box above is the only part you should mess with. Here are my images, shown with their file names:


a1.gif
b1.gif
c1.gif

a2.gif
b2.gif
c2.gif

In the code above you will see the same image names. This is the only part of the code you should change. For example, if your first "on" image was called "Ozzie.gif" and your first "off" image was called "Harriet.gif" then your first two lines would be like this:

<!--
function load_images() {
var image1 = new Image();
aaon.src = 'Ozzie.gif';
aaoff.src = 'Harriet.gif';

You would do this for every one of your images. If you had four buttons you wished to use instead of the three in my example, you would add a fourth like so:

<!--
function load_images() {
var image1 = new Image();
aaon.src = 'a1.gif';
aaoff.src = 'a2.gif';
abon.src = 'b1.gif';
aboff.src = 'b2.gif';
acon.src = 'c1.gif';
acoff.src = 'c2.gif';
adon.src = 'd1.gif';
adoff.src = 'd2.gif';
 } //-->

You have to remember to give them new names, in this example the new ones are adon.src and adoff.src. And of course the file names have changed, since it is pretty pointless to have a bunch of the very same button on each page.

Alright. Now that you have done that, you are ready for Lesson Two!
Click Here for Lesson Two.


1