http://www.developer.com/lang/dhtml/article.php/639761/Color-Changing-Button-Flips.htm

Color Changing Button Flips

March 6, 1999

Use these to jump around or read it all...

[What I'm Talking About] [The Style Sheet Block]
[The JavaScript] [The Button Code]
[Altering and Adding Buttons]

For those of you keeping score at home, this is the lucky seventh DHTML example. That's a good many and I hope to have more in the future. But more than that...

This is the third in the line of "flip" tutorials!

The first "flip" tutorial, Image Flips ( So, You Want An Image Flip, Huh? (Part 2) ), was, and is, a wildly popular tutorial. Ever since I posted it, people have been screaming for more and more flip tutorials. Well, now there are three: the original Image Flip, the Text Link Flip ( Color Changing Links Flips ), and now this... the Button Flip tutorial.
If you haven't already, visit those others at your leisure. For now... we learn to flip.

This button flip process is a DHTML format, as is the text flip process. That means that it's an Internet Explorer 4.0 (or better) event. As of the writing of this tutorial (9/23/98), Netscape Navigator wouldn't compile the commands to get the effect.
But fear not! Feel free to use these commands in place of all your link buttons as the format relies heavily on JavaScript, which Navigator does understand. So, when an Internet Explorer user clicks the button they get the effect. Netscape users simply get the button in pale gray. But both work just fine to create a link.

What I'm Talking About

Here's a button flip example. Roll your mouse back and forth over the button. See the color change? Wicked, huh? (A student said that to me today -- I have to make more of a point of keeping up with my slang!)
Now click. You'll be transported to the HTML Goodies Home Page. Wicked, yet again!

I'd like to thank Emad Fanous for sending me the basis of this script. I added the code to create the onMouseOut effect and the code to get the button to actually create a link. So, together we now bring you the components you'll need to get this button up and running on your page.

The Style Sheet Block

You'll need three items to make this little pup work. There's no "best" order to give them to you, so if I tend to backtrack in my explanation later, my apologies. Here's the Style Sheet Block:

<STYLE>
.start {color:yellow; background:navy}
.end {color:green; background:#ff00ff}

</STYLE>

Now, you can't see this yet so we've found our first point of possible back-tracking. There are two classes ( So, You Want CSS Classes and IDs, Huh? ) noted up there. (You can tell those are classes because there's a period before the two class names, "start" and "end".)
The first class, called "start" defines the color scheme when the mouse passes onto the button. I have it set to yellow text with a blue background. The second class, called "end," describes the look when the mouse then leaves the button. I have it set to green text on a pink background. Yuck, huh?

You can set the colors to whatever you want. You can even use the hex color commands as long as you remember to put a (#) pound sign in front of the hex code. Remember, this is in Style Sheet ( Link ) format and that (#) sign is required.
Before you ask, yes. You can use as many style sheet commands as you'd like in the start and end classes. You can make it so the button blows up to unbelievable proportions by setting the text font size to 72px in the start class. But we won't be doing that here as it would scare small children and I do not wish to be held responsible.

Now copy and paste the Style Sheet Block into your page's <HEAD> commands.

The JavaScript

Here's a break. The JavaScript is self-contained and doesn't require you to do any changing. Hot dog! Copy and paste it from here and cram it between your <HEAD> commands just below the Style Sheet Block.

<SCRIPT LANGUAGE="javascript">

function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>

By the way, I invite you to learn to create your own JavaScripts by reading the the HTML Goodies 30-Step The JavaScript Primers .

The Button Code

Now the good stuff, the button code. Let's take a quick look at it and then I'll explain what the parts do.

Because of space constraints, I have broken the code into a series of lines, but when you place this on your page, the commands between the < and the > should all go on one line or you might get an error.

Here's What's Happening

FORM starts the process. This button is created through form commands.
NAME=highlight connects this button to the JavaScript above. Look again at the script. You'll see the word "highlight" in there, too.
onMouseover is JavaScript for an event when the mouse passes over. In this case, the browser is told to enact a section of the JavaScript called "highlightButton('start'). Please note the class "start" is called for. Remember that from the Style Sheet Block? That's the blue background and yellow letters pattern.
onMouseout is the same as above except it is enacted when the mouse leaves the button. Note again that the class "end" is being called for. That's the pink and green pattern.
INPUT TYPE="button" is basic HTML to create a button.
VALUE="--" puts the text on the button.
onClick= is JavaScript to alert the browser to do something when the button is clicked. In this case I have it set to send the browser to the location.href of HTML Goodies. See that above? You can change out where this button points to by simply changing out the URL to Goodies with your own.
/FORM closes the form commands and ends the button.

Altering and Adding Buttons

As I said above in the Style Sheet Block section, you can add as many different Style Sheet ( Link ) attributes as you'd like to the "start" and "end" classes. Given enough time, I'll bet you can make some pretty awful events.

     If you'd like to offer your users more buttons, then you'll need to paste in the button code from above again and again until you have the number of buttons you need. You can, again, change where the button points to by changing out the URL attached to the onClick="location.href" command.
     If you'd like to have a different color pattern for each of the buttons, then you'll need to add new classes to the Style Sheet Block. What you name the class doesn't matter, just make sure you have the period in front to let the browser know that what you're offering is a class.
     Then, after you've added new classes, you can make each button call for a specific class of colors by changing out the class name in the onMouseOver and onMouseOut commands. Above the classes are ('start') and ('end'). See that? Just change out the words "start" and "end" with your own new class names. Notice there's no period required in the code that makes up the button. That's only in the Style Sheet Block.
     You need not do anything to the JavaScript itself. It just acts as a go-between for the button and the Style Sheet Block.

And that brings another tutorial to an end. Remember that even though this is DHTML, you can still place it on your pages for all the world to see. Those with Internet Explorer will get the flip effect, and those with Netscape Navigator will get a basic gray button that works just fine.
Or at least until Netscape Navigator 5.0 comes out. That version is supposed to support DHTML. At least that's what the paperwork says.

Try these other HTML Goodies DHTML examples:

[ So, You Want DHTML, Huh? ]
[ A Video Game ]
[ Power Point Transistions ]
[ Folder Trees ]
[ Link ]
[ Link ]
[ Link ]

Enjoy!

[What I'm Talking About] [The Style Sheet Block]
[The JavaScript] [The Button Code]
[Altering and Adding Buttons]

Sitemap | Contact Us