DHTML Example: Text Link Color Flips

By Joe Burns

http://www.htmlgoodies.com/beyond/dhtml/article.php/3470621/DHTML-Example-Text-Link-Color-Flips.htm (Back to article)

Use these to jump around or read it all...
[The Style Sheet Block] [The JavaScript]
[The Links] [One More Thing]

     Oh man, do people want this. The Goodies e-mail box has been pretty full lately asking how to change the color of a hypertext link when the mouse passes over. Before the advent of DHTML, about the best answer I could give to get this effect was to make the link an image and get the effect through an image flip JavaScript.

     As of the writing of this tutorial, this DHTML format were supported only by Internet Explorer browsers version 4.0 or better.

     Here are two examples of what I mean by a Text Flip. Look at the two bits of text just below this paragraph. Both are links, both will color change, but notice the one on the right looks like straight text to start. That's because the two links are created differently from one another. Now, without clicking, roll your pointer over the two links and watch the show but hold your applause until the end.

Click for JavaScripts.com  |   Click for HTML Goodies

     Hopefully you stopped your mouse on top of the link long enough to notice that a tool tip bar also pops up over the link. Great effect, huh? Now let's learn how to get it onto your page.

The Style Sheet Block

     Before you can get the effect, you need to alter and place two items in between the <HEAD> commands on your page, a style set block (you'll get that here) and a JavaScript to do the dirty work (you'll get that next).

     Here's the block. Copy and paste right from here if you'd like:

<STYLE>

SPAN {cursor: hand ; }
.onme1 {color: yellow ; }
.offme{color: green ; }

</STYLE>

     Okay, you've got three things to play with here, the type of cursor that appears in the SPAN (we'll get to that later), and two colors, one for when the mouse is on and one for when it is off. Here's a bit more detail:

     Now take your newly renovated style block and put it between the <HEAD> commands just under the <TITLE> commands. Moving along...

The JavaScript

     You know what's great about this JavaScript? You don't have to touch it at all. It is written to simply take the information provided in the style block and play with that. Just copy it straightaway from here and paste it just under the style block you worked with a moment ago.

<SCRIPT LANGUAGE="JavaScript">

function getonme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "onme1" ;
}
}

function getoffme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "offme";
}
}

document.onmouseover = getonme ;
document.onmouseout = getoffme ;
</SCRIPT>

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

The Links

Link Format One

     All-righty then, you're ready to start putting in links. We'll take a look at what is probably the most familiar format to you. Dig this:

<A HREF="http://www.javascripts.com">
<SPAN TITLE="tool tip box" litUp1>Click for JavaScripts.com</SPAN>
</A>

     I've broken the link above into its three sections on three lines for demonstration purposes. When you enter this onto your page, you should really have all three parts on one line.

Here's What's Happening

     If you haven't figured it out yet, that format shows up on the page as a link with the underline and blue color to start (before a mouse comes near it). You can get rid of the underline by adding:

STYLE="text-decoration: none"

     ...in the HREF command, after the full URL and end quote. But you still get the color of a link, or whatever color you set the LINK attribute to.
     Horrors! What to do? What to do?

Link Format Two

     Do this. Instead of using the hypertext link format with a SPAN, make the span the hypertext link. Here's the format:

<SPAN onClick="location.href='http://www.htmlgoodies.com'" TITLE="tool tip box" litUp1>
Click for HTML Goodies</SPAN>

Here's What's Happening

     This is a great format in that it's new, and requires less typing. The real downfall is that the link appears to be straight text when the page is first loaded (before a mouse comes anywhere near it). That won't call any attention to it as being a link, but to each their own. Some people will think this is silly and others will jump at the chance to use it.

One More Thing

     Remember that this is a DHTML system. Netscape Navigator will not support the links made from just the SPAN command (as of 9/22/98), so you should only use that format if you're sure the users will be running Internet Explorer (like when you're using a browser detect script).
     In all other cases you should try to use the link format above that follows the more traditional A HREF format. By using that you'll allow Internet Explorer users to see the effect, and Netscape Navigator users will get a basic link to follow.

 

Try these other HTML Goodies DHTML Examples:

[Example #2: A Video Game]
[Example #3: Power Point Transitions]
[Example #4: Folder Trees]
[Example #5: Moving Note Cards]
[Example #6: Color Changing Text Flips]
[Example #7: Color Changing Button Flips]
[Example #8: Toggling]

Enjoy!

[The Style Sheet Block] [The JavaScript]
[The Links] [One More Thing]