Visitor Link Preference

If you could give your visitors their preferred link style choice, would you?

Recently, a customer missed a screenshot link on a sales page of ours. The color of the link was too close to the black of the non-linked text for her to discern the difference.

Lucky for us, she used our contact page, saying she is shade-blind and the links are very hard to see. (Contact forms are a must, folks.)

This prompted me to develop a system to let site visitors choose their preferred link style.

Once a link style is selected, the style is applied to every page on a website that has been enabled with the system — for that visitor. Other visitors will see the default style or the style they previously selected.

I'll show you how to implement it on your own websites.

Overview of the Visitor Link Preference System

Somewhere noticeable, probably near the top of your web pages, will be a place with two or more examples of link styles. One would be the default page link. Others are variations like colors, underlining, or text sizes.

Pages displayed in frames or in iframe tags (such as Google AdSense) are not effected unless those pages are also Visitor Link Preference system enabled.

An example of the Visitor Link Preference system is here.

A feature of the Visitor Link Preference system is that you can selectively shield certain links from restyling by using the id="do_not_restyle" attribute in the A link tag.

Implementation Procedure

The demonstration page has a place to download the demonstration example. You might want to do that now so the rest of this article is easier to follow.

The CSS style sheet will have some additions made to it, specifically adding sub-classes to the A:link, visited, active, and hover pseudo classes.

If you are enabling more than one page, the CSS style sheet will need to be available for each.

It is assumed you are familiar with CSS. If that is not correct, W3schools has a great CSS section.

After the style sheet changes are made, you'll insert some copy 'n paste JavaScript on every page you are enabling with this system. The JavaScript will need to be inserted somewhere below the last link in the web page source code. Like CSS, the JavaScript may be imported from a separate file.

Last, you'll put the links on the page for your site visitors to choose their preferred link style.

Following is a step-by-step example.

Step 1, the CSS Style Sheet —

In the downloaded example, you'll notice these 4 lines:

A:link    { ... }
A:active  { ... }
A:visited { ... }
A:hover   { ... }

(The dots represent the actual style definitions.)

Those four lines are the link style when the web page loads, the default.

Below those 4 lines, you'll notice 3 more sets of 4 lines, like this:

A.styleone:link    { ... }
A.styleone:active  { ... }
A.styleone:visited { ... }
A.styleone:hover   { ... }

A.styletwo:link    { ... }
A.styletwo:active  { ... }
A.styletwo:visited { ... }
A.styletwo:hover   { ... }

A.stylethree:link    { ... }
A.stylethree:active  { ... }
A.stylethree:visited { ... }
A.stylethree:hover   { ... }

You'll notice that the pseudo-classes can be assigned to class names.

The style definitions of the first class name, "styleone", is a duplicate of the previous 4 lines where the default link styles are specified. That's so the visitor can change back to the same style as the default if s/he wants to.

So far, we have the default link style definitions. Then we have 3 additional sets of definitions, each with its own class name. The first of the additional sets has the same definitions the default has.

We don't yet have the links the visitor clicks on to change the link style and we don't have the JavaScript. But if we did, clicking on a link style link would run the JavaScript which would cause one of the 3 additional sets of definitions to be the active set.

Step 2, the JavaScript —

Copy the JavaScript from the downloaded example and paste it into your web page.

The JavaScript needs to be pasted into the web page source code somewhere below the last link on the page. Immediately above the closing </body> tag is good.

Step 3, the Links —

The links the visitor can click to change the links style invoke the JavaScript you pasted into the web page in the previous step. It also is of the same link style that will be assigned to the entire page.

The link is of this format:

<a 
   id="do_not_restyle" 
   class="________" 
   href="javascript:ChangeStyleTo('________');">
Different Style
</a>

The id="do_not_restyle" attribute isolates this link from style changes when the styles of the rest of links on the page are changed. The reason is that this link text should always represent the link style it will change the rest of the page to.

The class="________" attribute displays this link in the style it will change the rest of the links on the page to when the link is clicked. Replace the underline with the relevant class name.

The ________ in the href attribute sends the link style name to the JavaScript, which changes the link style on the page. Replace the underline with the relevant class name, the same class name the class="________" attribute has.

Testing

Once the three steps are done, the web page can be tested.

Upload the web page to your server and enjoy :)

Some Considerations

The class names don't have to be "styleone", "styletwo", "stylethree", like the example. They can be any class name appropriate for your implementation.

Any links that you want to isolate from link style changes need the "do_not_restyle" value to the id attribute: id="do_not_restyle"

Will Bontrager