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.
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
Posted by Swatinem on August 30th, 2002.
Great idea! I modified your idea. For my a tags I added a class=“external“. In my stylesheet, I added this:
.external {
background: url(/images/externallink.gif) right center no-repeat;
padding-right: 12px;
}
This works across current versions of IE6, NN7, Opera7, and Mozilla. Any idea how I can get alt text to appear for each little globe saying “external link” since this is implemented through the stylesheet?
Posted by Arleen on August 30th, 2002.
Cool stuff. But I don’t see these icons in Mozilla 1.4Do I have to change some settings or what? Please help.
Posted by Marcus on August 30th, 2002.
Great article. I think it would be a little more inviting if you formatted the code with line breaks:div.blogbody a[href^=“http:“] { background: url(/images/remote.gif) right center no-repeat;padding-right: 12px;}Just a thought
Posted by spencer on August 30th, 2002.
Just as an addendum to this article – I’ve put together a script to made css3 :hover effects work in ie6.
http://blue.ripcord.co.nz/~ben/css3/
Ben
Posted by Ben Nolan on December 20th, 2003.
Ben: the script appears to be under something of a restrictive licence, but the link to the licencing page is dead.
Posted by sil on December 20th, 2003.
Arleen,
I do not think that you have to worry about Alt text for the background-image. The Alt text is needed for screen reader, but since the image does not actually appear on the page, it will not trip up the screen reader.
Posted by Josh on December 23rd, 2003.
Josh,
the alt text would be of use not only for screen readers but also to ‘normal’ users who may be wondering about what the icon signifies.
On mouseover, the alt text would conveniently provide this addtl bit of info.
Con: yet more images can clutter the screen if a page is full of external links. What I would like better instead: insert a title to the a-tag.
Anyone know if that’s possible?
Posted by Marc on February 18th, 2004.
Josh,
the alt text would be of use not only for screen readers but also to ‘normal’ users who may be wondering about what the icon signifies.
On mouseover, the alt text would conveniently provide this addtl bit of info.
Con: yet more images can clutter the screen if a page is full of external links. What I would like better instead: insert a title to the a-tag.
Anyone know if that’s possible?
Posted by Marc on February 18th, 2004.
great site
Posted by milf on March 13th, 2004.
anyone know how can open links from iframe in a new window?
Posted by Peter on March 22nd, 2004.
is it only me or is this article really unreadable?!
Posted by Funny Joe on April 15th, 2004.
I found it really interesting, thanks.
Posted by Greg on April 23rd, 2004.
Posted by FistBang on May 1st, 2004.
Posted by Fresh Auditions on May 1st, 2004.
The font is too small, I can hardly read.
Posted by Review on May 3rd, 2004.
Josh,
it’s a good idea, a good solution.
Jos
Posted by Jos on June 3rd, 2004.
very good solution
Posted by Hose on June 8th, 2004.
hi
Posted by Hotel on June 18th, 2004.
Livecam says: livecam
Posted by Livecam on August 20th, 2004.
I have FireFox (Mozilla 1.7.3) and I can’t see this stuff.
I agree this page could be much better formatted and I wish these porn-users would stay away from useful technical sites…
Posted by Marc on October 23rd, 2004.
shouldn’t this be done by adding content, instead of using background images (this still leaves the oppertunity to use other backgrounds on all links
a[href^="http://"]:after { content: ' ' url('yourimage.gif'); }Posted by Rikkert Koppes on December 15th, 2004.
Rikkert: yep, but generated content isn’t very well supported. Moreover, if you do it with generated content then the icon isn’t actually part of the link, and clicking it won’t do anything, which is a bit weird and counterintuitive. This won’t be fixed until generated content can contain HTML.
Posted by sil on December 15th, 2004.
erm, that’s not correct, generated content is supported by all browsers (that i’ve seen; please tell me the ones who do not) that support the above selector construct.
Furthermore, generated content is in fact part of the link and will perform action when clicked. (::before and :: after are generated within the element).
I used this on my own site as well: http://www.rikkertkoppes.com/thoughts/2004/10/27#U20041215
Posted by Rikkert Koppes on December 15th, 2004.
very nice trick. It also works well on most links of my site. but i have some links wich go over a internal counter-script to external pages
for example:
http://www.MyDomain.net/path/go.php?http://www.OtherDomain.com/path
i tried to use parts of the syntax of the forward counter-uri with rule 1,
[href^=“http://www.MyDomain.net/path/go.php?http:“]
but it doesn’t work for this special case of “external” link…
any idea??
Posted by martin on January 16th, 2005.
hi,
i tried for about one hour and found a solution. the solution is simple, but a little bit strange. it depends on, at which postion you right the rule.
if I write:
[href^=“http://www.MyDomain.net/path/go.php?http:“]
and then…
a[href=“http://www.MyDomain.net“], a[href=“http://www.MyDomain.net“]
the second rules delete the frist rule
but if I write:
a[href=“http://www.MyDomain.net“], a[href=“http://www.MyDomain.net“]
and then special rule…
a[href^=“http://www.MyDomain.net/path/go.php?http://“
…it works
tzzz ;-))
Posted by martin on January 16th, 2005.
Martin: very true. This is because if you put the shorter rule second, then the URL in your page matches both rules, and then the second rule applies, overriding the first.
Posted by sil on January 16th, 2005.
thanks for the tips on this thread.. used em on my site – http://www.ekstrak.co.uk took a bit of fiddling but i got there in ther end.
Posted by ekstrak on February 17th, 2005.
I bequeath to the author a generous set of *
* tags in order to break up this fine article into something more readable.
Your tutorial is very useful – please consider formatting it in a readable fashion. =)
Posted by EyePulp on March 25th, 2005.
Bah – one more time – P tags would help with the readability of an otherwise impressive article.
Posted by EyePulp on March 25th, 2005.
EyePulp: I’ll fix it at some point. That they’re not there is for historical reasons…
Posted by sil on March 25th, 2005.
Ahhhh….fixed.
Posted by sil on April 15th, 2005.
cool!!
there’s eny way of makint that imges are not affected by this?!รง
i dont want enternal icons on images that have links… is there eny way of making this?!
Posted by Task on April 26th, 2005.
what if i use sometimes images instead of text links? (![]()
). any workarounds apart from using a CSS-class?
Please mail me
Posted by icewind on June 14th, 2005.
hi
Posted by rutus on August 1st, 2005.
There is a problem with this implementation: If the link wraps two lines or more, the image is not positionen correctly. Any idears on how to fix this?
Posted by Jan Aagaard on August 22nd, 2005.