Mini Icons
Inspired by Tamara, I went searching for the origins of her micro icons to indicate external links. My search turned up micro icons at webgraphics. Along with the external links icon, I also grabbed the email icon.
My implementation is a bit different then Tamara’s though. I used a set of CSS3 selectors to select links that are external.
a[href^="mailto:"] {
background: transparent url('/images/aemail.gif') 100% 50% no-repeat;
padding-right: 10px;
}
div.content a[href^="http:"] {
background: transparent url('/images/aoutside.gif') 100% 50% no-repeat;
padding-right: 10px;
}
div.content a[href^="http://my-dimension.com"],
div.content a[href^="http://www.my-dimension.com"] {
background: inherit;
padding-right: 0px;
}That last selector disables the icon on links to this site but that use a ful URL instead of a relative one. This won’t work in most browsers (not sure which though) but then again this is my persoanl playground. Not to mention it is a feature which is not required to interact with this site.
Update[04/18/2003]: It seems a lot of feedback is being generated by this attribute selector method. Something I need to clarify though, I did not create this method. I found it on as days pass by. I apolgize for not crediting this earlier.