This is a script from my archive. It is intended for inclusion in a web page, but it does something that is probably best done server-side. It’s customary in wikis to add an icon to indicate an external link. Why not use the favicon of the site you’re linking to? Attach to a test page with a lot of external links and modify the fourth line to put your domain name in.
Disclaimer: Transcluding images is generally bad practice. Amongst the downsides: you are taking someone else’s bandwidth, albeit a tiny amount; somebody could get their server to include a disgusting image in your site (not sure how disgusting you can be in 16×16 pixels). Anyway, with those caveats…)
<script type="text/javascript"> <pre>function linkIsSafe(u) {if (u.substr(0,7)=='mailto:') return false; if (u.substr(0,11)=='javascript:') return false; if (u.indexOf('exampledomain')!=-1) return false; // Adapt this to weed out internal links return true; } function imghilite() {var n_to_open,dl,dll,i; n_to_open=0; dl=document.links; dll=dl.length; for(i = 0; i < dll; ++i) {if (linkIsSafe(dl[i].href)) ++n_to_open;} if (n_to_open) {for (i=0; i < dll; ++i) if (linkIsSafe(dl[i].href)) {var img=document.createElement('img'); img.style.display='none'; img.height=img.width=16;img.style.border=0; img.src=dl[i].href.split('/').splice(0,3).join('/')+'/favicon.ico'; img.onload=img.style.display="inline"; dl[i].insertBefore(img,dl[i].firstChild); } } }; </script> </head> <body onload="void(imghilite());"></code>
August 10, 2007 at 8:17 am
You ask the question, “Why not use the favicon of the site you’re linking to?”… I think this is one of those times that “just because you can, doesn’t mean you should.”
I see the uniform external-link icon as having a specific meaning: prepare for a mental context switch… going somewhere else now. Having lots of different pictures would be confusing (and possibly quite ugly too)
The compromise I’d go with would be a set of *similar* icons indicating external links to a *small* set of standard sites: one for Wikipedia; one for Dictionary / Answers.com / Wordnet; one for Google; and then one for everything else.
Oh, and also a cautionary one for going to YouTube and MySpace, which implicitly recommends muting speakers before clicking. (And a “boobies” one for NSFW links)
August 10, 2007 at 11:14 am
Good points all, damn you. You spoil my fun! 🙂
February 18, 2008 at 4:04 pm
I’ve since found this post on Ask the CSS Guy which spells out a more elegant solution of using favicons, but only within part of your page such as a named list or div.