Link Thumbnailは、その名の通りリンク先のサムネールを表示することができます。このAjaxライブラリは以下のサイトからダウンロードできます。
http://lab.arc90.com/2006/07/link_thumbnail.php
ダウンロードしたZIPファイルを解凍すると、いくつかファイルがありますが必要なのは「arc90_linkthumb.js」「linkpic_shadow.gif」の２つです。画像ファイルはサムネールの車道を表示する部分なので適当な画像に変更しても構いません。その場合にはスタイルシートの画像のパス／ファイル名を変更する必要があります。
Link Thumbnailの使い方は簡単で、まず以下のようにしてスクリプトを読み込みます。
<script type="text/javascript" src="arc90_linkthumb.js"></script>
次にスタイルシートを定義します。これは以下の2つのクラスを指定します。
<style type="text/css"><!--
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: #fff url(linkpic_shadow.gif) no-repeat bottom right;
}
あとはサムネールを表示させたい<a>タグ内にclass="linkthumb"を記述するだけです。ただし、どんなページでもサムネールが表示できるわけではありません。というのも、サムネール画像のデータは他のサーバーから取得しているため、サーバー上にサムネール画像が存在しない場合には表示されないからです。この点には注意してください。また、ブラウザによってサムネール画像の表示位置が異なる場合があるため、表示されたサムネール画像が閲覧の邪魔にならないかどうかなども確認が必要です。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Link Thumbnail サンプル</title>
<script type="text/javascript" src="arc90_linkthumb.js"></script>
<style type="text/css"><!--
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: #fff url(linkpic_shadow.gif) no-repeat bottom right;
}
--></style>
</head>
<body>
<h1>Link Thumbnail サンプル</h1>
<a href="http://www.yahoo.co.jp/"
class="linkthumb">Yahoo JAPAN</a><br>
<a href="http://www.google.co.jp/"
class="linkthumb">Google</a><br>
<a href="http://www.openspc2.org/"
class="linkthumb">OpenSpace</a> (サーバにサムネールがないと表示されない)<br>
<a href="http://www.toyota.co.jp/"
class="linkthumb">TOYOTA</a><br>
<a href="http://www.nissan.co.jp/"
class="linkthumb">NISSAN</a><br>
<a href="http://www.w3.org/"
class="linkthumb">W3C</a><br>
</body>
</html>
[
目次へ]
(2006.7.25)