Adding Icons to Links
Version |
Date |
Changes |
1.0 |
2008-01-02 |
Initial version. |
Description
Explains how to use CSS to create clickable icons for all of your HTML hyperlinks. For example, the following screenshot came from Quadralay's website and shows how icons can be used to assist with viewing text hyperlinks.
Contents
Goals
- Make hyperlinks more visible using an image file.
- Existing documents or source content will not require any significant re-working.
- Solution does not contain javascript.
(
) Identify to the user external links that are not on the same website. (
) Identify to the user links that jump to a different topic somewhere on the same website. (
) Identify to the user links that nest within a given topic, but are on a different page. - (no icon) Identify to the user links that stay on the same HTML page.
- Make sure existing website navigation links such as menus are not affected.
- Provide a simple mechanism for overriding the icon behavior using the "class" attribute.
- Be able to deploy it immediately without modifying any of the website.
- Make sure it works as designed for both Mozilla 1.x and IE 7 class browsers.
- Make sure that fallback behavior for non-supported browsers is functional.
Keys to Making it Work
Use a CSS attribute selector such as: "a[href]" to handle the default case.
Use a CSS attribute selector such as: "a[href^="http://"]" to determine type of link destination, by matching a beginning set of characters.
- Set a background image with a right position and a padding-right value to create the trailing icon.
- Use the correct order for each CSS rule so that the proper properties get set. For example: place the most general selectors first and then append other rules for additional exceptions based on pattern matching.
- If necessary, prefix the selectors with ancestor element types to restrict their use to just the content areas of the website.
Coding It
Sample CSS code
For Reverb (and perhaps other formats), the file is webworks.css.
/* links to nested areas (drill down) */
a[href]
{
background: transparent url("/common/img/page.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links with in the same file */
a[href^="#"]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}
/* links to external websites */
a[href^="http"]
{
background: transparent url("/common/img/www.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links to same website */
a[href^="/"], /* implicit */
a[href^="../"], /* out of current area, but still implicit */
a[href^="http://www.your_website.com"] /* explicit www.your_website.com */
{
background: transparent url("/common/img/jump.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links that should not have a button (must remove it) */
a[class]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}
Limiting Behavior to Content Areas Only
If you want to prevent hyperlinks in other parts of the website, such as navigation links and menus, then you will need to use ancestor prefixes in your CSS rules. For example, the following is an example of how to apply a CSS ancestor prefix rule so that only a portion of the hyperlinks use icons.
Sample HTML with content in div element
<html>
<body>
<div class="content">
<p>Paragraph text</p>
<li>List text</li>
<dd>Definition description text</dd>
<dt>Definition term text</dt>
<blockquote>Text in blockquote</blockquote>
<div>Text in div</div>
Text not in anything
</div>
</body>
</html>
Sample CSS with ancestor prefixes added
For Reverb (and perhaps other formats), the file is webworks.css.
/* links to nested areas (drill down) */
div.content p a[href],
div.content li a[href],
div.content dd a[href],
div.content dt a[href],
div.content blockquote a[href],
div.content div a[href],
div.content a[href]
{
background: transparent url("/common/img/page.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links with in the same file */
div.content p a[href^="#"],
div.content li a[href^="#"],
div.content dd a[href^="#"],
div.content dt a[href^="#"],
div.content blockquote a[href^="#"],
div.content div a[href^="#"],
div.content a[href^="#"]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}
/* links to external websites */
div.content p a[href^="http"],
div.content li a[href^="http"],
div.content dd a[href^="http"],
div.content dt a[href^="http"],
div.content blockquote a[href^="http"],
div.content div a[href^="http"]
{
background: transparent url("/common/img/www.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links to webworks.com */
div.content p a[href^="/"],
div.content li a[href^="/"],
div.content dd a[href^="/"],
div.content dt a[href^="/"],
div.content blockquote a[href^="/"],
div.content div a[href^="/"],
div.content a[href^="/"],
div.content p a[href^="../"],
div.content li a[href^="../"],
div.content dd a[href^="../"],
div.content dt a[href^="../"],
div.content blockquote a[href^="../"],
div.content div a[href^="../"],
div.content a[href^="../"],
div.content p a[href^="http://www.your_website.com"],
div.content li a[href^="http://www.your_website.com"],
div.content dd a[href^="http://www.your_website.com"],
div.content dt a[href^="http://www.your_website.com"],
div.content blockquote a[href^="http://www.your_website.com"],
div.content div a[href^="http://www.your_website.com"],
div.content a[href^="http://www.your_website.com"]
{
background: transparent url("/common/img/jump.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links that should not have a button (must remove it) */
a[class]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}