A few days ago, Mark Pilgrim wrote up some details on how to automatically
insert an image before off-site links, using Movable Type macros. I
don't like doing it that way; it's possible with pure CSS (assuming you
have a browser that supports CSS3 selectors -- this means Mozilla, in
case you hadn't guessed). If you are using Mozilla, you'll see a little world icon (
) after each external link. Read on for a description of how the technique works.
Mark's method works by using MT macros to assign a class of "offsite" to off site links, and then styling those links accordingly. Using CSS3 selectors, we can style off-site links directly without having to assign them a class or run any server-side code. Here's the code to do it, and then we'll discuss how it works.
/* Add an external-link icon to absolute links */
div.blogbody a[href^="http:"] {
background: url(/images/remote.gif) right center no-repeat;
padding-right: 12px;
}
div.blogbody a[href^="http:"]:hover {
background: url(/images/remote_a.gif) right center no-repeat;
}
/* ...but not to absolute links in this domain... */
div.blogbody a[href^="http://www.kryogenix.org"] {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http://www.kryogenix.org"]:hover {
background: transparent;
}
/* ...or to the "google for $postTitle" link for each entry */
div.blogbody a[href^="http:"].googlelink {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http:"].googlelink:hover {
background: transparent;
}
This all works by using the CSS3 "starts-with" selector,
^=, on attributes. Where we have a selector
a[href^="http:"], that means "select all a
tags where the href attribute starts
with the string http:". This will select all
absolute links, i.e., those that are not given as a link relative to
where the current page is. That's our first selector: it says "add this
background image and a bit of right padding to all absolute links".
(Note that the technique of adding a little bit of padding and then
putting an icon inside that padding as a background image, to make it look as though the icon is part of the flow of the page, is one that I got from Eric Meyer on CSS.)
(Ignore the second rule for the moment.)
Now, all outside links are absolute links (because they're not on the same server as the current page), but some internal site links may also be absolute (for instance, permalinks often are). So our third rule removes the background and padding we applied above for absolute links that point to my domain. (You'll have to customise this bit for your own domain.)
Ignoring the fourth rule for a little bit, the fifth rule does the same as the third rule, for absolute links with class "googlelink". This is because posts here have a "search Google for the post title" link, which is itself a small icon; it looks a bit daft to have a small representative icon (the magnifying glass) followed up by another small icon! So this suppresses the "external link" indicator for that particular link (which is defined as class "googlelink" in the MT templates).
Note that flashy people could have defined the third and fifth rules as one rule, because you can add multiple selectors on a rule; this should work:
div.blogbody a[href^="http://www.kryogenix.org"], div.blogbody a[href^="http:"].googlelink {
etc etc etc
}
but I wanted to take my time over this, because CSS3 selectors aren't all that widely supported.
What about those rules that we ignored, the second, fourth, and sixth? Well, they apply to the absolute external links in exactly the same way as rules 1, 3, and 5, but they add the pseudo-class :hover. So when you mouseover one of our external links, these new styles apply. All this does is switch in a new version of the background image (in this case, an animated spinning version of the world image).
The images come from Matterform's excellent QBullets collection.
So, there you have it. Fortunately, Internet Explorer, which doesn't support CSS3 selectors, doesn't partially apply them or anything; our selectors above just don't match anything and hence the view in IE is unchanged (you just don't get the neat icons).
For those of you who are Mozillaless and remain unclear on what this should all look like, here's a screenshot. See how the "Show, Don't Sell" link, which is external, has the icon, whereas the "more detailed writeup" link, which is a link to somewhere else on kryogenix.org, does not.
Swatinem
Arleen
Marcus
spencer
Ben Nolan
sil
Josh
Marc
milf
Peter
Funny Joe
Greg
Review
Jos
Hose
Hotel
Livecam
Rikkert Koppes
martin
ekstrak
EyePulp
sil
Task
icewind
rutus
Jan Aagaard
I dont know if its possible to enter whole html code in the content: “bla“; attribute.
But if its possible you could use the :after pseudo-class to insert a img tag with an alt text or whatever. But i dunno if its posible! :D