This is a trick that I'd been trying to figure out for a long time. Below, I'll provide two easy ways to do it through Internet Explorer. Unfortunately, neither one works with Netscape at the moment (6/8/99). The current release of Netscape Navigator at the time of writing is 4.6 and it doesn't fully support style sheets. Now, you users out there who are looking for a way to get it to work in Navigator don't give up. There are ways to do it, and I've seen it published; right now I'm wishing I'd bookmarked the sites I'd found. The reason that I don't code my site so that Navigator works as well is that it looked to complex to worry about. So my Navigator visitors will just get the plain 'ol links. Now for the two methods:
Style Sheets:By far, using a simple Style Sheet declaration between the <HEAD> tags is the easiest way to do it. For this, you must set up your document like this:
|
<HTML>
<HEAD> <TITLE>Title of document</TITLE> <STYLE TYPE="text/css"> <!-- // Place code here --> </STYLE> |
Standard stuff here; just set up your page.
Here's where you set up your Style Sheets. This block opens Style Sheet declarations. This little block of code should look familiar. It's a comment line. With this here, older browsers that don't support style sheets will overlook this code. This eliminates errors. Just put the code in the middle. |
Now for the code that does the work. Built into the <STYLE> tag are three link elements. They are:
And among those three elements you can use just about any text property there is. Some of those are: Font Family (change the font), Font Style (italic, oblique, normal), Font Weight (boldness), Font Size, Text-Decoration (underlined, blink, etc.), and color. I'll show an example using a few of those.
Yes, those are squiggly brackets surrounding the properties of each link element. And you use a semicolon in between each property to separate them. And a colon between the property name and it's value. Now, we've set the default link to be blue with no underline. The only thing that changes for the visited link is that the color becomes purple. But with hover, when your mouse passes over the link, both the color changes (to a lighter blue), and the size changes to 10 point to make it smaller for more effect. To try this out, just move your mouse over the links on the left frame. Yes, this is the exact code I used.
Don't get me wrong, this method is easy, too. It just takes a few more lines of code. All of the above information on Style Sheets applies, so I suggest you read though it. The only difference is that with this method, you have to specify all the elements for each link. I do this on my front page in addition to the above method because I want two different colors for different links on the same page. This is the best way to accomplish that.
The example is posted below. You'll notice the function in the top section. All it does ignore the code if it detects Netscape Navigator as the browser. This is because Navigator generates an error when trying to modify the color property; it doesn't exist in Navigator yet.
Say what?! Actually, it's not that hard. After all, I did create the code. So, let's take this apart piece by piece. First, the top piece gets placed between the head tags and opens with the beginning SCRIPT tag. So far so good; now the browser knows what language you're speaking. Number two, we have the comment marks again so non-JavaScript browsers won't produce an error. Underneath that is my function. The format function name(variable) is used here. The name I've given my function is changeColor, and the name I chose for the variable (whatever I pass to it, which you'll see below) is shade. Now, shade can be used in my function.
Now the bulk of the function. Read the line of code above, and I'll put the English translation here. "If the name of the browser doesn't = 'Netscape', then do what's in the brackets." That's precisely what that means. navigator.appName is a property that is built in to every browser to help identify itself. So, put simply, the code between the brackets (what does all the work) never executes if you're running Navigator. But it will for every other browser.
So, the code in the brackets. Don't even worry about what it means. Just get the gist of it. window.event.srcElement.style.color points to the current object (the link you have your mouse over) and the code sets that equal to the variable stored in shade. So where do you get this variable from? Read on.
The controlling code is in the link itself. You open the link with <a, then you declare what style you want in-line! In this case, you tell it to just make the color black. Remember that this code is from my main page and I've already declared all the other elements with the method used above. The only thing I wanted different is for one link to be black. With that said, look at onMouseOver and onMouseOut. They call my function, and in the parenthesis, inside single quotes, is the color that you want to change the link to. This is what gets passed on to the variable with the name shade! onMouseOver is the event that is tripped when your mouse passes over the link, and onMouseOut is tripped when your mouse leaves the link again. So the first changes the link to a different color, and the second changes it back to black. The rest of the link is just your standard code.
To see this in action, move your mouse over the links on my main page that are white.