MyDimension

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.

This entry was posted on Tuesday, April 15th, 2003 at 10:11:47 +0000 and is filed under (X)HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.