Memo for a Moment

SimpleAPIやはてなスクリーンショットを利用してURLで指定したホームページ、サイトのスクリーンショットを取得することができる。これとリンクを組み合わせるとサイトが一目瞭然になっておもしろそうなのでやってみた。どれを使おうか迷ったのだけれど今回はMozShotに決定。

スクリーンショットの取り方

とりあえず画像をゲットするだけなら
'http://mozshot.nemui.org/shot?対象ページのURL'
にアクセスすれば128×128のスクリーンショットが得られる。

大きいサイズ( 256×256 )はURLの?の前に/largeを、小さいサイズ( 64×64 )は/smallを入れればよい。その他もっと細かい設定をして取得することもできるようです。

たとえば、、、
http://mozshot.nemui.org/shot?http://goodspade.blog87.fc2.com/

これをリンク文字にマウスが乗ったときにポップアップで表示してみよう。
※ポップアップ表示の仕方はこちら

どうせならイメージリンクにしちゃえば都合が良いので、onMouseOverでアンカータグを作ってそれをoverlibに渡すようにした。

こんな感じ、、、

var source =
'<ａ href=\'' +
window.event.srcElement.href +
'\' target=\'_blank\' onClick=\'nd();\' >' +
'<ｉｍｇ src=\'http://mozshot.nemui.org/shot/large?' +
window.event.srcElement.href +
'\' style=\'border:0;\' alt=\'' +
window.event.srcElement.href + '\' />' +
'<／ａ>';

window.event.srcElement.href ← これが大元のリンクURLなので、それをスクリーショット取得URLに連結、altに設定でＯＫ

デモ

http://www.yahoo.co.jp

http://www.google.co.jp

http://www.youtube.com/

http://www.myspace.com/

http://mixi.jp/

ホームページ制作ＡＳＰ

登録サイト30万突破のA8.net