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 web site 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 web sites.
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 linked
from 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 linked from
here 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.
And the CSS tutorial articles
are also good.
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:
(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:
You'll notice that the pseudo-classes can be assigned to
class names. Wonderful stuff, this CSS.
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:
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
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
