Psyked*
it’s easy once you know how.
Loading ...Auto-matic Link Icons
Posted by James - 10/07/07 at 06:07:17 pmCSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up - automatic link icons.
First, a look at the end result :-
(don’t bother clicking the links though - they’re empty)
Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. The astute of you may notice that the ‘external’ link isn’t actually external - think of it more as ‘absolute’. How do we achieve these results automatically? Well, that’s with the power of the new CSS selectors. 456BereaSt. has a nice article on them, but the stuff we’re concerned with is the attribute selectors.
Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. The easiest way for me to explain is to show you…
Here’s a simple ‘absolute’ link selector - a[href="http:"] - this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Interesting, but its not very useful, because the attribute would need to be exactly “http:” for it to work. So, we add the ^ operator, which means ’starts with’. So ( a[href^="http:"] ) means any link with a href attribute that starts with ‘http:’ - thus, every external link.
Another operator we can use is $, which means ‘ends with’. So a[href$='.pdf'] is any links that end with .pdf. Now we know how to automatically treat different links differently. Oh, and it works fine in all the most recent browsers (IE7, Firefox) And won’t have any effect on browsers that don’t understand the selectors, so its safe to use.
Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here. Once you’ve got your icons, a little clever implimentation of styles will enable you to indent your link slightly to add you icon in as a background image. Thus;
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}
And you’re away - limited only by your icon supply, and the volume of conditional statements you want to make! Here’s mine - covering external links, mailto links, and common document formats…
a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/MailTo.gif) center left no-repeat;
}
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
}
a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
}
a[href$='.ppt'], a[href$='.pps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}
18 Comments »
Leave a comment
Recent Comments
- Up to my ears in Flash: a million thank yous for such a great design and such ease of implementation. more more!
- James: Cheers savil, we really like those fonts (much more natural than the GG ones because [as you say] they...
- savil: I want just want to share with you the way I get may subscript and superscript inin dynamic and input text...
- James: I agree with you - there are important differences between the attributes you can use, their purpose and...
- Al: I know I’m awfully late on this one, but there is a difference. Alt attributes are JUST for accessibility....
Highest Rated Posts
- ActionScript: getURL vs. ExternalInterface - When & Why
- Custom character-set embedding in Flash
- Alternativa3D - More 3D goodness from the Flash Player
- Auto-matic Link Icons
- Little HTML mysteries… alt vs. title
- Open Screen madness?
- Automated removal of non-static elements with Photoshop
- Trouble migrating to Actionscript 3?
- Identifying link targets with CSS
- Work in progress…
Posts via Category
- ActionScript (9)
- Adobe (25)
- Blogroll (6)
- Competitions (2)
- CSS (5)
- Design (3)
- External links (8)
- General chit-chat (17)
- HTML (2)
- Icons (1)
- JavaScript (2)
- Magazines (1)
- MDM (1)
- Zinc (1)
- Resources (12)
- Sideblog (2)
- Tools (4)
- Validation (2)
- Wordpress (4)
- Work (1)
- XSLT (1)
Recent Trackbacks
- www.tagsto.com/trackback/: Hubs of Red Interactive...
- hot-iphones: kramer-pre%–>laserwrote an interesting post today on Here’s a quick excerpt LG sure won’t want...
- boogdesign blog: kramer-pre%–>, if you’re still wavering about whether or not to go to any of the events...
- CSS News: web design tutorials, resources, articles: kramer-pre%–>del.icio.us recent » CSS Addict »How to add...
- Front end Developer: kramer-pre%–>First, a look at the end result :- This is a normal link. This is an external...
based on GimpStyle Theme.
Entries and comments feeds.
Valid XHTML and CSS.
Very nice tip James! I’ve bookmarked this one. It’s one of those nice little tricks that will display as intended in all modern browsers, and gracefully degrade in IE 6.
Comment by Jonathan Nicol — 18 July 2007 #
Glad it helps!
In the event that you’ve requirements that can’t be met like this - or you need more compatability with older browsers, you can always take the base CSS that generates the iconified effect, and apply it manually as ‘normal’ styles.
Comment by James — 19 July 2007 #
Great article—I’ll use it on my blog!
Comment by Pensador — 19 July 2007 #
谢谢。
Comment by 超 — 22 July 2007 #
test: http://www.google.hu/test.zip
Comment by kisPocok — 2 August 2007 #
Hey hey, it works! An interesting effect though with the combination of external linked files… I wonder wether I can find a fix for that…
Comment by James — 2 August 2007 #
Hmm, I bet the external link+file type issue could be fixed with the :before and :after selectors?
Comment by James — 3 August 2007 #
Nope… I was wrong. I guess that external link icons need a little more thought…
Comment by James — 9 August 2007 #
Im a bit new to css but would a roll over effect still work on image backgrounds using your automated stylesheet if used
a:hover [href$='.doc']
?????
Comment by john — 23 August 2007 #
That’s really dependant on your setup - Elements can only have one image background. So, if your links elements already have a background image either of the CSS styles could be overwritten.
If however, the parent element of your link has the background image, they should both display their respective backgrounds.
Does that help?
Comment by James — 23 August 2007 #
hello
i have an idea …
add Internet explorer icon to the normal links
Comment by Hajcc — 14 October 2007 #
Indeed - adding an Internet Explorer Icon for .htm pages is possible, and I’ve seen it on other websites, like those created in Sharepoint Server (Microsofts’) - but I decided to steer clear of it, so-as not to offend users of other browsers.
It does however, give me another idea…
Combine this CSS with another script - such as the css browser selector, and you can tailor the .htm icons to your visitors browser… i like it.
Comment by James — 15 October 2007 #
Good read
Comment by Website Design Belfast — 4 November 2007 #
In Dreamweaver CS3 the CSS code;
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}
generates the error “Error parsing styles Affects: Internet Explorer 6.0″
Any advice?
Comment by hbadorties — 10 December 2007 #
@hbadorties -
I can’t be sure without having Dreamweaver CS3 to hand, but it’s probably throwing the warning because of the a[href$='.pdf'] selector.
IE6 doesn’t support these attribute selectors fully, meaning the styles wouldn’t be recognised by that browser, the upshot being that IE6 won’t display the custom styles for your links.
On the plus side, it wouldn’t break anything.
The only way around this is to manually apply the link styles with classes. So it’s not a critical warning, IE6 is just (unfortunately) incompatable with this method!
Comment by James — 10 December 2007 #
If you’re looking for a way to do this that will work in IE6, you can do it with Javascript — users who don’t have Javascript enabled won’t see it, but that’s likely a smaller population than users who are using IE6. I’ve written about a way to do it with jQuery here:
http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery/
Comment by rdmey — 7 January 2008 #
It works on WP as well.
Comment by David Jacques-Louis — 23 February 2008 #
Great tips thanks
Comment by marketing and web design — 17 March 2008 #