「Link Tumbnail」で行き先確認
「Link Thumbnail」は、リンクにカーソルをあわせたときに、リンク先のサムネイル画像を表示してくれるライブラリです。
「LinkThmbnail」は、javaScriptとCSSで構成されています。
リンク先に移動する前に、これから移動するホームページを
サムネイル画像で確認できれば安心というわけです。
サムネイル画像の取得は、以下のサイトのサムネイルサービスを利用しているようです。
それでは、利用方法を説明します。
(1)「linktumb」ライブラリをインストールする
「Link Thumbnail」のページから、「linkthumb.zip」をダウンロードして解凍します。
(2)HTMLファイル(「sample.html」)を記述する
ライブラリをロードして、<a>のclass属性に"linkthumb"を指定します。
<html>
<head>
<title>Link Tumbnail</title>
<!-- 「linkthumb.js」をロードする -->
<script language="JavaScript" type="Text/JavaScript"
src="./arc90_linkthumb.js">
</script>
<!-- 「linkpic_shadow.gif」をロードする -->
<style type="text/css" media="screen">
.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>
<!-- リンクを記述する -->
<a href="http://lab.arc90.com/2006/07/link_thumbnail.php" class="linkthumb">linkthumb</a><br/>
<a href="http://kazuhiro.ty.land.to/blog/" class="linkthumb">blog</a><br/>
<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://java.sun.com/" class="linkthumb">Java</a><br/>
</body>
</html>
(3)サムネイルが表示されるか確認する
「sample.html」を表示して、カーソルをリンクに合わせて、サムネイルがきちんと表示されるか確認してみます。
うまく表示できない場合は、サムネイル画像を提供するサーバにサムネイル画像がないことが考えられます。
私の場合も、うまく表示できませんでした。
そこで利用するサーバを変更してみました。
「arc90_linkthumb.js」ファイルを、次のように変更しました。
(before)
var arc90_linksources = [
['http://images.websnapr.com/?url=', 202, 152],
['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120]
];
(after)
var arc90_linksources = [
['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120]
];
これで、うまく表示されるようになりました。
「表示例」をこちらに示します。
ただし、現時点では、このblogのサムネイルは表示されませんでした。
