HoverButtons Script

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

This script takes simple DIV elements and makes them change state when you mouseover, mouseout, and press on them.

All you have to do is create your DIV elements, create 3 stylesheet rules, and run a javascript command for each "class" of button.

The example at left is a column of simple buttons that change when you move/press your mouse over them. You'll also notice the text shifts like a normal button would. These attributes are all controlled by the stylesheets you define.

To the right is another example. The text doesn't shift when you press the buttons though.

Notice the last row of text does not do anything even though it looks the same as the rows above? More on that later.

Button	Button	Button	Button
Button	Button	Button	Button
Button	Button	Button	Button

How it works:

First, you define 3 seperate CSS classes that will define how the buttons will look onmouseover, onmouseout, and pressed. These will be put in between STYLE tags in the HEAD section of your page. The classnames have to be named a specific way. Whatever you pick as the classname in your DIV elements will be the "default" classname. Name the other two classnames with a suffix of "hover" and "press".

The example classnames below will use the default classname of "test".

.test {
width:150px;
text-align:left;
color:black;
font-size:9pt;
font-family:verdana;
font-weight:bold;
background-color:#FFDDFF;
border-color:#FFDDFF;
border-width:2px;
border-style:solid;
padding:4 6 4 6;
}

.testhover {
width:150px;
text-align:left;
color:black;
font-size:9pt;
font-family:verdana;
font-weight:bold;
background-color:#FE95FF;
border-color:#FE95FF;
border-width:2px;
border-style:outset;
padding:4 6 4 6;
}

.testpress {
width:150px;
text-align:left;
color:black;
font-size:9pt;
font-family:verdana;
font-weight:bold;
background-color:#FE95FF;
border-color:#FE95FF;
border-width:2px;
border-style:inset;
padding:6 6 2 8;
}

Notice again how the classnames were named with the suffixes of "hover" and "press" based on the root classname of "test".

Next, you build one or more DIV element(s) and assign them a stylesheet classname like so:

<div class="test" hoverbuttons="yes">Button Text</div>

The hoverbuttons="yes" attribute is what tells the script that you want the effect to apply to this DIV. If you do not add this attribute, then the script will skip it assuming that it is just a regular DIV element even though it may have the same classname. That is why the third row of text in the second set of button examples at the top of this page works the way they do.
Copy and paste the line below at the very end of your page just before the </BODY> tag.

<script language="javascript" src="hoverbuttons.js"></script>

This is so the script finds all the applicable DIV elements. If you put it somewhere else in your page, the script will not find some or all of the DIVs.
That's it! Here is a DIV using the values from the steps above:

Button Text

Notes & Advanced Options:

This script only works in the newer browsers such as IE5+, Netscape6+, and Mozilla1+. The effect will not be visible in older browsers, but no errors will be generated.
The effect where the text shifts when you press the button in some of my examples is accomplished by tweaking the padding CSS attribute. I assigned all 4 padding values at once, but you can seperate them into their individual attributes if you want (padding-top, padding-right, padding-bottom, padding-right) to make it easier. When these values are specified on one line like I did, they apply in the following order: top, right, bottom, and left.
Some people somewhat familiar with javascript may notice that the script simply changes the classname based on mouse events: onmouseover, onmouseout, onmousedown, and onmouseup. Hmmm, it looks like you can't set handlers for these events now, right? Wrong! :) You can still set these handlers in the tag and everything will still work fine.

Below is some example code which changes the statusbar text using mouse events to demonstrate:

<div class="test" hoverbuttons="yes" onmousedown="window.status='MOUSEDOWN'" onmouseup="window.status='MOUSEUP'" onmouseover="window.status='MOUSEOVER'" onmouseout="window.status='MOUSEOUT'">Button Text</div>

...and the end result (watch the status area):

Button