|
|
Posted by Art on 09/11/07 20:52
On 9/11/07 2:55 PM, Jukka K. Korpela wrote:
> Scripsit victoria.wong.jhu@gmail.com:
>
>> I am designing a web page. I would like to differentiate two types of
>> links: those to internal documents, and those hosted at an external
>> location.
>
> If you think it serves a useful purpose (rather than just the page owner's
> own idea of classifying links that way), put something like "(external)" or
> "(ext.)" or maybe <img alt="(external)" title="the preceding link refers to
> a resource external to this site" class="ext" src="ext.gif" width="..."
> height="..."> after each external link and put
> @media print { .ext { display: none; } }
> into your style sheet.
>
> But think first! Will this help users, or just confuse them, or annoy them,
> or be simply irrelevant?
>
>> I have decided to do this by specifying different colors for
>> each type of link.
>
> Wrong idea. A natural one, but wrong. You won't be able to figure out a
> system of colors that works. Remember that you would need at least 3 + 3
> different colors, to maintain the vital distinction between different states
> of links. More info:
> http://www.cs.tut.fi/~jkorpela/www/links.html
>
> But if you still "must" do it, you need to add class attributes to the
> external (or internal) links and use CSS.
>
There are some instances where an alternate type of hyperlink
identification by color and styling is desirable.
One such example would be the case of hyperlinks contained in a top
level navigation bar, masthead, or common trailer region. In these
instances, the hyperlinks would show up without underlining and in a
consistent color regardless of visited state. This styling would likely
be different that what is deployed in the main content areas.
Pages that utilize <img>'s for navigation hyperlinks typically follow
this scheme. The same can be accomplished with text hyperlinks in <a>
anchors as well.
A css div style can be defined for such hyperlinks (div.masthead in the
example). Then a <div class=masthead>...</div> container surrounds the
applicable block for the area in the HTML. This saves having to specify
them via style/class/span overrides for each instance of an <a> anchor.
For example (masthead background defined in a dark blue hue):
div.masthead a:link {
background: inherit; \* for CSS checker compliance *\
color:white; \* link color *\
text-decoration:none; \* suppresses underlining *\
}
div.masthead a:visited {
background: inherit;
color:white; \* keeps color same as link color *\
text-decoration:none;
}
div.masthead a:hover {
background: inherit;
color: #CC0000; \* highlight color when rodent is passed over a
link *\
text-decoration:none;
}
Art
Navigation:
[Reply to this message]
|