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>
</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:
- cursor: hand denotes to the computer that when the mouse passes over the link, that little pointing hand should appear. You can lose the hand by replacing “hand” with “bar.” Then you’ll get the tall “I” thing that looks like you’re staring down the long end of an I-beam.
- .onme1 {color: yellow ;} is the color the link will turn when the mouse passes over. Notice the period before “onme1.” The period tells the browser that the following is a class of commands.
- .offme{color: green ; } is the color you get when the mouse moves off. Watch the period again. Make sure it’s in there.
- You can also use hex color codes, but if you do, be sure to place the pound sign (#) before the code.
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() { |
By the way, I invite you to learn to create your own JavaScripts by reading the
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
- A HREF=”http://www.javascripts.com should look pretty familiar. If not, you may be in way over your head in this tutorial.
- SPAN is a new HTML 4.0 command. It sets aside a block of text in much the same way you would using a <DIV> command. The difference is that the <DIV> is pretty blatant when it breaks up the page, whereas this SPAN is more subtle. It also allows for a lot more attribute commands than does the <DIV>
- TITLE=”–“ is what makes the tool tip pop-up box. Put in whatever text you’d like. What you type in is what will be displayed.
- litUp1 is a function contained within the JavaScript. Look at the script again. You’ll see it is used to grab the color from the style block and perform the process.
- /SPAN ends the span.
- /A ends the hypertext link.
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:
…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=’https://www.htmlgoodies.com'” TITLE=”tool tip box” litUp1> Click for HTML Goodies</SPAN> |
Here’s What’s Happening
- SPAN starts the span of text to be affected.
- onClick=”location.href=’—-‘” is JavaScript that creates a link to another page when the line of text within the SPAN is clicked (notice it’s “onClick”?). Put the address you want to link to where I have the HTML Goodies address above.
- TITLE=”—“ offers the tool tip bar again.
- litUp1 acts again as the go-between the JavaScript and this link.
- /SPAN ends the whole deal.
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]
