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

リンクにサムネイルを表示できるjavascript「Link Thumbnail」

｜ ｜ ｜ ｜ ｜ ｜ ｜

リンクにサムネイルを表示するとリンク先のイメージが想像できて訪問者にはいいかもしれません。
Link Thumbnailはサムネイル表示を手軽に導入できるjavascriptです。

使用方法
Link Thumbnailからファイル群をダウンロードします。
<script type="text/javascript" src="http://yourdomain/arc90_linkthumb.js"></script>
<style type="text/css">
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
width: 160px;
height: 120px;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: transparent url(http://yourdomain/linkpic_shadow.gif) no-repeat bottom right;
width: 160px;
height: 120px;
}

以上で完成です。
あとは、サムネイル表示したいリンクにclass="linkthumb"を付与してください。
また以下を記述すると全てのリンクが対象になります。
<script type="text/javascript">
arc90_linkThumbUseClassName = false;
</script>
リンクにサムネイルを表示できるjavascript「Link Thumbnail」サンプル

記事作成：2008年01月04日

前の記事：アクセス数ランキング2007
次の記事：javascriptライブラリ「mootools」でパズルを作成する