Hyperlink Tutorial

Those that have the latest edition of the template (the one named new-sbisite or new-sbisite2, or template-V3) then you may well have noticed a class called "jumplink" in the main css file.

In fact in the default template setup, there is a demonstration link set up on the page. For those that DON'T have this class, then the css is given below to add it to your file.

For those using a colored background on hover, with your links, you will realize why I created this class. because if you add in an anchor link, then the "arrival point" text will show up with the link styling, even though it's not actually a link!

That is because the hyperlink is using the a in the link code.....take a look at this code from the template.

This says that all links will be underlined, and when they are hovered over, the text will turn white, with a background color of #bccbf2.

What All This Means

Let's suppose you either don't have the class "jumplink", or don't use it at all. Any HTML tag that begins with <a will have the link styling applied to it. Now, that's all fine and dandy for this example.

But what happens in this next example? We have a link at the top of the page, linking to a section further down (or on a toally different page on the site) all about widgets. And we have decided to use the <H2> tag, "These Are My Widgets" as the anchor point.

Further down the page, we have placed the anchor point.

Any guesses as to what's going to happen? The anchor point, which is an H3 heading will be styled like the rest of your links. The text will turn white, with a colored background on hover, even though its not actually a link.....it just happens to use the a in the anchor link.

The Solution

I looked at various ways to overcome this, none of which I found satisfactory. You could have a blank link with no text, but suppose you want to remove the formatting from somthing like the rss links?? In fact, I found some other so called "template designers" had overlooked or ignored this problem entirely. A solution has to do two things.

• Work correctly in ALL browsers
• Be easy to understand and implement

So take a look at the code again (top of the page). We add in the class called jumplink to our anchor link, and the link formatting is removed. Let's test it. this link will take you back to the top of the page. The anchor point is our main heading, "Hyperlink Tutorial"

Looking a Little Deeper

So if we examine how that works..... at the top of the page (our "arrival point") we have this.

And on the link you used to get there, we have this.

Please take careful notice of the order the HTML has been used.....there's a good reason for it. the <a name= "link"> has been used BEFORE the <H1> tag. Any guesses as to why that is?

It's to do with how HTML is applied....the class use for my H1 tags is applied AFER the class called jumplink. That means the text shows as the dark purple I want it to be, rather than the default jumplink color of #000 (black)

If I were to put the tags round the other way, my link would still work perfectly. But my headline would be black. Hopefully you understand why that works as it does!

Another use For The Jumplink Class

Do you have an rss box setup on your homepage? If so, and you have links set to a background color on hover, then go and look at your page. What happens when you hover over one of the image links? You will see a bit of background color show.

But now you (should) know how to fix that. Add the jumplink class to all of those link tags. There's one for MSN, another for Google, and Yahoo etc. Anywhere in the tag will be fine...no need to worry about where it's placed.

Is this really necessary?

But I personally like to link to a headline, or text, when I can. Search engine spiders follow your websites internal links as well as incoming ones. Do they also follow hyperlinks, when they see a name or #?? And if your hyperlinks point to relevant text, it must be better than having an empty tag. Now, I can't prove that it's better SEO, but it's pretty logical to assume there might be some benefit to doing this.