Flagging Links

This tutorial will show you how to add a small GIF image to a link depending on whether the link is internal (no image), external, a specific external link, or a mailto link.

Required knowledge: XHTML, CSS, How to create a transparent GIF (or use the ones provided).

Tested in: Firefox Internet Explorer 6 Internet Explorer 7 and 8 Netscape 8 Opera 8 Safari

The XHTML code…

… basically remains the same. In the case of the external link you will have to add class="external", in the case of an e-mail link we use class="mailto" and for the specific link we can use a so-called attribute selector. We’ll come to that later.

<a href="internal.html">Example for an internal link</a>

<a href="http://www.csszengarden.com/">Example for an external link</a>

<a href="http://www.royal.gov.uk/">The British Monarchy (specific external link)</a>

<a href="mailto:blabla@blabla.com">Example for an e-mail link</a>

The internal link is just there to show the difference. We won’t do anything with it.

For the flagging we use three different GIFs, transparent and quite small. Here they are (right-click and save as):

External Link mailto Link Specific Link

On to the CSS code. First we’ll define the normal link attributes and add the right values for the classes.

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006699;
	text-decoration: none;
	font-weight: bold;
}
a.external {
	padding-left: 16px;
	background: url(external.gif) left center no-repeat;
}
a.mailto {
	padding-left: 16px;
	background: url(mailto.gif) left center no-repeat;
}

You may of course also add the definitions for the pseudo classes :visited, :hover etc. but I will leave this out for now. color and text-decoration are of course a matter of personal taste. The padding-left value has to be adjusted according to the image width. Be sure that you leave some space between the image and the text. In this case the image width is 10 pixels and I have added some more 6 pixels between image and text.

Note that I have used the shorthand for background. A useful article on shorthand properties can be found at 456 Berea Street.

The Attribute Selector

The attribute selector is a useful means if you want specific tag with specific attribute to look, uhm, specific. There are four types of attribute selectors.

[attribute] matches all elements that have this attribute, regardless of its value.

[attribute=value] matches all elements that have this attribute and exactly this value.

[attribute~=value] matches all elements that have this attribute and this value among others.

[attribute|=value] matches all elements that have this attribute and starts with this value among others.

So in case of the royal link we wanted to apply above, we could use the following definition:

a[href="http://www.royal.gov.uk/"] {
	padding-left: 15px;
	backgound: url(royal.gif) left center no-repeat;
}

This is how it looks in the end…

Questions/Problems/Disappointments

Now, you may ask, if we have this attribute selector [attribute|=value], couldn’t we just use them on the href value, because it starts with http in case of the external link and with mailto in case of the mail link? No, unfortunately not, because this would have been really nifty. But life isn’t alway like this… You will have to use the whole attribute value.

Another thing is that the image will behave strangely in Internet Explorer 7 Beta if the link continues into the next line. If you are currently using IE7 and want to know how this looks, go back to the XHTML/CSS tutorials homepage and see the Creative Commons link or have a look at the 456 Berea Street link above which is flagged as external. IE7 displays the link as a block of two lines and thinks that it has to use the center of the whole block. In the final release of IE7 the image disappears altogether.

Additional Information

The page Iconize Textlinks with CSS already takes the whole thing some steps further. IE6/7 support is out of the question due to CSS3 attribute selectors. Still, if you work with a descent browser…

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s