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>
Advertisements
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.