Learn about

Faux MouseOvers

for your Website
Did you ever wonder how buttons on a web page sometime change color or perhaps look like they're being pressed in? It's not too hard, but a bit more work than having just a plain button. I hope to explain it to you in very simple terms. I'll break it into small parts instead of showing the whole code at once. In fact, the code that makes this work is a lot like a JavaScript code, but it's not JavaScript, just a plain old HTML look-a-like.
The first thing that you need are two separate buttons, one that appears on the page and another one that will replace it when the mouse passes over. Now you know, there are two (2) images instead of one for every button that has a onMouseOver activity.


Normal Button	Lit-up Button	onMouseOver Button


Here is the first part of the code, the HYPERLINK portion:


<A HREF="http://www.address_and_filename.html"


The next portion will be the IMAGE SOURCE for the button that changes:


onMouseOver="image.src='filename_button-over.jpg-gif'"

Please pay particular notice to the use of Apostrophes and Double Quotes in the above address and filename. There's a Double Quote (") before the image.src then an apostrophe after the (=), then at the end of the line there is an apostrophe and double quotes (' ")
Here comes the next line of code, the one that shows the "normal" button, or when the mouse is not over it:


onMouseOut="image.src='filename_button-out.jpg-gif'">

The next to last portion will be the IMAGE SOURCE code for the button that will appear when the page is first loaded:


<IMG SRC="filename-out.jpg-gif"


Here is the last line of code that's needed. This is where you use the NAME code tag to make it work.
Note: It doesn't matter what you use after the word NAME, but it will be used in the Source code, e.g., image.src='. And, here's the very important part, you can only use that name image, e.g., only once on a page.
If you plan on having several buttons that change color or shape do the following:
NAME="image" ; then use NAME="image1" ; and then NAME="image2" etc., get the idea?


NAME="image" WIDTH=n HEIGHT=n Border="0" ALT="Home"> </A>


Get in the habit of using the Width and Height attributes, they will draw a box on the screen as a button place holder for the browser.
Use the Border="0" to eliminate the hypertext colored box from surrounding the button.
And of course, Netiquette rules that you use the ALT=" tag to let people who have turned off images know what to expect.
Did you notice that the rule on apostrophes and double quotes applies here also. Now this address and button is the one that will appear on the page all the time until a mouse passes over the button.
So, here is the completed HTML coding that produces the JavaScript onMouseOver look-a-like:

<A HREF="http://www.address_and_filename.html"
onMouseOver="image.src='filename-over.jpg-gif'"
onMouseOut="image.src='filename-out.jpg-gif'">
<IMG SRC="filename-out.jpg-gif" NAME="image" WIDTH=n HEIGHT=n
BORDER=0 ALT="onMouseOver Button" VALIGN="bottom"></A>


See it's not too hard to do but certainly is more code to type than the typical clickable button code like the following:


<A HREF="address_and_filename.html">

<IMG SRC="filename_button.jpg-gif"> </A>


But I think you and your visitors will like the look of buttons that have become more interactive.

Return to Menu