リンクにふきだし風サムネイルを表示する : 下を向いて歩こう

とりあえず下記のYahooのリンクにカーソル（ポインタ？）を重ねてみてください

Yahoo

漫画のふきだし風の所にサムネイルが表示されたでしょうか？
結構、いい感じたと思うのですがどうでしょう？

PHPSPOT開発日記さん経由で知ったWebSnaprというサイトのサービスです。
しかし、いつもの事ながら問題発生。
基本的にWebSnaprというサイトはサムネイル画像のAPIを提供してくれているのですが画像の生成にかなり時間がかかるのです。
駄目じゃん。(ーー;)

座禅を組んで考えてみました。
ぽくぽくぽく、チーン！
閃いた！（このパターン使うの2度目だよ）

ここで前から使っているThumbnail APIを組み合わせればいけるのではないか？
（ここから試行錯誤で出来るようになるまで数時間かかりました）

まずはWebSnaprのサイトのWebSnapr - Preview Bubble Javascriptというページからpreviewbubble.zipというファイルをダウンロード。
圧縮されているので解凍ソフトなどを使って解凍。
次の3つファイルが入ったpreviewbubbleフォルダが出てきます。
bg.png（ふきだしの元の画像）
previewbubble.js（スプリクト）
install.txt（英語だよぉ！＠桜塚やっくん風に読んで）

以下の説明はlivedoo無料版でのやり方です。
まずはbg.pngのファイルをアップロードしてください。（.pngなので問題なくアップロードできます）
アップロードしたらアップロードしたファイルのURLを確認して置いてください。

以下のコードをトップページと個別記事、カテゴリー、月別のHTMLの＜head＞～＜/head＞の間のコピーしてください。
そこでコードの中の最初のほうにある。
var bubbleImagePath = './bg.png';
を
var bubbleImagePath = 'アップロードしたファイルのURL';
に書き換えてください。



<script type="text/javascript">

/*

    WebSnapr - Preview Bubble Javascript

    Written by Juan Xavier Larrea 

    http://www.websnapr.com - xavier@websnapr.com   

    

*/





// Point this variable to the correct location of the bg.png file

var bubbleImagePath = 'https://livedoor.blogimg.jp/snow7/imgs/7/c/7c32c5ea.png';



// DO NOT EDIT BENEATH THIS

if(typeof Array.prototype.push!="function"){

Array.prototype.push=ArrayPush;

function ArrayPush(_1){

this[this.length]=_1;

}

}

function WSR_getElementsByClassName(_2,_3,_4){

var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);

var _6=new Array();

_4=_4.replace(/\-/g,"\\-");

var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");

var _8;

for(var i=0;i<_5.length;i++){

_8=_5[i];

if(_7.test(_8.className)){

_6.push(_8);

}

}

return (_6);

}

function bindBubbles(e){

lbActions=WSR_getElementsByClassName(document,"a","previewlink");

for(i=0;i<lbActions.length;i++){

if(window.addEventListener){

lbActions[i].addEventListener("mouseover",attachBubble,false);

lbActions[i].addEventListener("mouseout",detachBubble,false);

}else{

lbActions[i].attachEvent("onmouseover",attachBubble);

lbActions[i].attachEvent("onmouseout",detachBubble);

}

}

}

function attachBubble(_b){

var _c;

if(_b["srcElement"]){

_c=_b["srcElement"];

}else{

_c=_b["target"];

}

var _d=_c;

var _e=findPos(_c)[0]+5;

var _f=findPos(_c)[1]+17;

var _10=document.createElement("div");

_10.className="previewbubble";

_10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");

_10.style.width="240px";

_10.style.position="absolute";

_10.style.top=_f;

_10.style.zIndex=99999;

_10.style.left=_e;

_10.style.textAlign="left";

_10.style.height="190px";

_10.style.paddingTop="0";

_10.style.paddingLeft="0";

_10.style.paddingBottom="0";

_10.style.paddingRight="0";

_10.style.marginTop="0";

_10.style.marginLeft="0";

_10.style.marginBottom="0";

_10.style.marginRight="0";

_10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImagePath + "',sizingMethod='image')";

var img=document.createElement("img");

img.setAttribute("style","margin: auto; padding: 0; margin-left: 25px; margin-top: 27px;  border: 0");

img.style.paddingTop="0";

img.style.paddingLeft="0";

img.style.paddingBottom="0";

img.style.paddingRight="0";

img.style.margin="auto";

img.style.marginTop="27px";

img.style.marginLeft="25px";

img.style.marginBottom="0";

img.style.marginRight="0";

img.style.borderTop="0";

img.style.borderLeft="0";

img.style.borderBottom="0";

img.style.borderRight="0";

img.setAttribute("src","http://thumbs.bookmacro.com/w/202/h/152/u/"+_d);

img.setAttribute("width",202);

img.setAttribute("height",152);

img.setAttribute("alt","Snapshot");

_10.appendChild(img);

document.getElementsByTagName("body")[0].appendChild(_10);

}

function detachBubble(_12){

lbActions=WSR_getElementsByClassName(document,"div","previewbubble");

for(i=0;i<lbActions.length;i++){

lbActions[i].parentNode.removeChild(lbActions[i]);

}

}

if(window.addEventListener){

addEventListener("load",bindBubbles,false);

}else{

attachEvent("onload",bindBubbles);

}

function findPos(obj){

var _14=curtop=0;

if(obj.offsetParent){

_14=obj.offsetLeft;

curtop=obj.offsetTop;

while(obj=obj.offsetParent){

_14+=obj.offsetLeft;

curtop+=obj.offsetTop;

}

}

return [_14,curtop];

}



</script>

あとはリンクの属性にclass="previewlink"を付け足してください。
リアルタイムでサムネイルが出来るわけではありませんが生成は早いし次回表示からはキャッシュされる模様で表示は速くなります。
以上です。
表示出来ましたでしょうか？
なおlivedoor有料版では最初と最後の行を削り外部ファイルにすればもっとスマートに出来ると思います（やった事ないから解らないけど）

以下は元々のスクリプトを修正した部分です。
何回も書いていますが元々HTMLもCSSもスクリプトよく解っていないので変な事をしてる可能性も大きいのですが一応動いているのでそれで良しとしています。

var _d=_c.href;
var _d=_c;

img.setAttribute("src","http://images.websnapr.com/?url="+_d);
img.setAttribute("src","http://thumbs.bookmacro.com/w/202/h/152/u/"+_d);

赤くなってる文字が修正後の物です。

前回のサムネイル表示も良かったのですが、内部リンクを表示しない、サムネイルの表示位置が変だ、スクリプトが長いなどの問題があったので今回の物に変更しました。