skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

faviconを表示するjavascript「Hyperlink Cues with Favicons」

｜ ｜ ｜ ｜ ｜ ｜ ｜

最近のブラウザにはfavicon（favorite icon）と呼ばれるブックマークやアドレス表示欄、タブなどに表示されるアイコンがあります。
サイトを識別するため、目立つためなどさまざまな目的で使用されています。
Hyperlink Cues with Faviconsでは、リンクさせた外部リンクの全て前にこのfaviconを表示させるjavascriptを公開しています。

使用方法
favicon.jsとfaviconを使用していないサイト用にexternal.gifをダウンロードします。
<script src="http://yourdomain/favicon.js" type="text/javascript"></script>
<style type="text/css">
img.faviconimg {border:0;width:11px;height:11px;padding:0 4px}
ul.favilist {list-style:none;}
</style>
＊favicon.js内でexternal.gifを指定している箇所を適宜変更してください。
以上のようにhead内に書き込んだら、あとはHTMLでulのclass属性にfavilistを付与し、リンクをliで括ってください。
<ul class="favilist">
<li><a href="">リンク先</a></li>
<li><a href="">リンク先</a></li>
<li><a href="">リンク先</a></li>
</ul>
faviconを表示するjavascript「Hyperlink Cues with Favicons」サンプル

記事作成：2007年10月06日

前の記事：角を回るDockを実現するjavascript「Corner Dock Navigation」
次の記事：テキストボックスを自動で収縮するjavascript「Resizing textarea」