jquery-jLinkPreview:リンク先ページのサムネイル(キャプチャー)を表示できるJs



リンクをマウスオーバーするとリンク先URLページの
サムネイル(キャプチャー)が表示されます。

1.CSSの記述例

jLinkPreview.cssファイル内は調整してみて下さい。

<link rel="stylesheet" href="jLinkPreview.css" />
<style type="text/css">
<!--
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
a{
	line-height:2.0em;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

2.ヘッダーとJavaScriptの記述例

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery-jLinkPreview-1.0.0-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
   $().jLinkPreview({
         'preload': true,
         'width': 256,
         'height': 192,
         'fade': 300,
         'background-color': '#333',
         'elementsHavingId': '',
         'elementsHavingClass': 'example',
         'attribute': 'title'
   });
});
</script>

リンクのclass名やマウスーバー時の噴出しの
サイズや色が設定できます。

3.HTMLの記述例

    <a class="example" href="http://www.blinderhidden.com" title="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN">WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN</a><br />
    <a class="example" href="http://www.blinderhidden.com/about" title="ABOUT | BLINDER HIDDEN">ABOUT | BLINDER HIDDEN</a>

jquery-jLinkPreview:リンク先ページのサムネイル(キャプチャー)を表示するデモページ

ソース元:jLinkPreview

リンク先ページのキャプチャーイメージが反映される(読込まれる)
までに若干時間がかかるっぽいです。
あと、キャプチャー画像右下にスクリーンショットを
取っている所?(ソース元?)のロゴが出ます。