リンクにマウスオーバーすることで、とび先のサイトのタイトルとキャプチャをリアルタイムに取得してきます。
こんな感じです。リンクの上にカーソルをのせてみてください。タイトルとサイトのスクリーンショットが表示されると思います。
あれ
それ
これ
どれ
はら
ほろ
ひれ
はれ
実際のhtmlはこんな感じ
<br /> <a href="http://yahoo.co.jp" class="titleget">あれ</a><br /> <a href="http://mixi.jp" class ="titleget">それ</a><br /> <a href="http://tanteifile.com" class ="titleget">これ</a><br /> <a href="http://pplog.jugem.cc" class ="titleget">どれ</a><br /> <a href="http://daiskip.com" class ="titleget">はら</a><br /> <a href="http://glover.jp" class ="titleget">ほろ</a><br /> <a href="http://lolipop.jp" class ="titleget">ひれ</a><br /> <a href="http://jugem.jp" class ="titleget">はれ</a><br />
htmlが読み込まれた後にaタグにonmouseoverとonmouseoutを付与してます。hrefに指定されたurlを一度読みにいき、titleタグからタイトルを引っ張ってきます。スクリーンショットはwindowsサーバーに仕込んだ簡単なプログラムをかまして、そこから取って来てます。
最初ajaxで取りにいってたんですが、ローカルではちゃんと動くのにサーバーではなぜか動かないという現象でノイローゼになりかけました。他人には見えぬものが見えたり、皮膚の下をミミズが這う様な幻覚に襲われたりしたんですが、結局クロスドメイン問題でした。
なので、onmouseover時に動的にscriptエレメントを生成してjsファイル経由でタイトルを取りにいっています。面倒くさい。足もくさい
あと、スクリーンショット生成に時間がかかるのでそこをどうにかしたい。。なんか良い方法ないですかね。