Wikipedia-type icons

June 19th, 2008, 7:53 am

Wikipedia has icons that automatically show whenever there is an external link or file. While I've been able to get this to work in Firefox, I have not been able to get anything working in IE6 or below. Yet, Wikipedia seems to be able to do it.

Does anyone know how they do it? What script are they using?

June 20th, 2008, 12:32 am

This is a part of the CSS that Wikipedia uses:

Line number On/Off

Code: Select all

1. ...
2. #bodyContent a.external,
3. #bodyContent a[href ^="gopher://"] {
4.     background: url(external.png) center right no-repeat;
5.     padding-right: 13px;
6. }
7. #bodyContent a[href ^="https://"],
8. .link-https {
9.     background: url(lock_icon.gif) center right no-repeat;
10.     padding-right: 16px;
11. }
12. ...

It's got a class a.external and also selectors such as href ^= "http://" - but the selectors work only in IE7 or above. The articles on Wikipedia directly use <a class="external" href="..."> so that it works on all browsers - this is done on the server by the Wiki parser, there's no client-side fix.