ウェッジのウェブサイトで利用するために作成した JavaScript ですが、需要がありそうなのでダウンロードできるようにしました。
リンクに class="previewlink" と書くだけで、リンク先ウェブサイトの縮小画像(サムネイル)をポップアップで表示します。
以下2点のおまけ機能付きです。
- リンクに title が設定されている場合、タイトルの内容をポップアップ表示
- リンクに rel="external" が設定されている場合、リンク先を別ウィンドウ表示
サンプル :
JavaScript が機能しない場合でも閲覧に支障はありませんので、 W3C 標準準拠でアクセシビリティ・ユーザビリティに配慮しているサイトでも気軽に導入して頂けます。
また、 CSS が書ける方はご自身のサイトに合わせてカスタマイズ可能です。
--
ウェブサイトのスクリーンショット撮影と、その画像の利用には賛否両論ありますが、ウェブサイトのデータの全てはローカルコンピュータに複製された上で逐次レンダリングされている点や、 arpanet から流れるインターネットの思想、及び日本国内の著作者人格権に関する記述から、ウェッジでは虚偽のないスクリーンショットの利用に関して、法律上・倫理上問題がないと判断して、このスクリプトを公開しています。
上記内容に関して不安、もしくは抵抗のある場合はご利用を差し控えてください。
以下の3行を HTML のヘッダー内に記入するだけです。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.linkactions.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.linkactions.css" media="screen" />
jQuery を利用していますので、既に jQuery を導入済みの場合、1行目は必要ありません。
デザインを変更する場合はお好みに合わせて jquery.linkactions.css を編集してください。
リンク先のスクリーンショットを表示する場合は、以下のように a の要素に class="previewlink" と記述します。
<a href="http://www.j-wedg.co.jp/" class="previewlink">リンク先のスクリーンショット表示</a>
上記コードのサンプル : リンク先のスクリーンショット表示
初回画像取得時は約5～10秒かかります。
(スクリーンショットは3日おきに再取得します)
リンク先の解説をポップアップ表示する場合は、以下のように a の要素に title="解説など" と記述します。
<a href="http://www.j-wedg.co.jp/" title="大阪のデザイン会社なら株式会社ウェッジ。WEB制作からパンフレットや会社案内などの企画・制作まで、グラフィックデザインはお任せ。">リンクの title 要素を表示</a>
上記コードのサンプル : リンクの title 要素を表示
別ウィンドウ(別タブ)を開いてリンク先を表示する場合は、以下のように a の要素に rel="external" と記述します。上記2つの機能と併用可能です。
<a href="http://www.j-wedg.co.jp/" rel="external">リンク先を別ウィンドウ表示</a>
上記コードのサンプル : リンク先を別ウィンドウ表示
target="_blank" 等のタグは InternetExploror の(建前は)独自拡張ですし、ユーザビリティー上何かと問題がありますので、このような機能を付加してみました。
JavaScript が機能しない場合は同一ウィンドウでリンク先を表示するという点がみそです。
以下のリンクをクリックしてください。サンプル HTML と必要ファイル一式の ZIP ファイルです。
画像はウェッジのサーバより取得していますので、サーバがダウンしている際はサムネイルは表示されません。
2010年6月16日 追記 : 動作を一部変更しました。
詳細は「ウェブサイトのスクリーンショット生成」
Hiro