memo.xight.org

日々のメモ

リンクをマウスオーバーでサムネイルをポップアップ

Source

function linkthumb(){
	var nophoto = 'http://img.simpleapi.net/img/nophoto.gif';
	var img = document.createElement('img');
	img.src = nophoto;
	img.onmouseout = function(){
		img.src=nophoto;
		img.style.display='none';
	};
	img.style.position = 'absolute';
	img.style.cursor   = 'pointer';
	img.style.display  = 'none';
	document.body.appendChild(img);
	var d = document.getElementsByTagName('div');
	for (var j = 0 ; j < d.length ; j++){
		if (d[j].className != 'body') continue;
		var a = d[j].getElementsByTagName('a');
		for (var i = 0 ; i < a.length ; i++){
			if (!a[i].href.match(/^http:/)) continue;
			if (a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;
			a[i].onmouseover=function(e){
				var link  = this.href;
				var thumb = 'http://img.simpleapi.net/small/'+link;
				img.onmouseover=function(){
					img.src=thumb;
					img.style.display='block';
				};
				img.onclick = function(){
					location.href=link;
				};
				if(document.all){
					img.style.left = document.documentElement.scrollLeft + event.x + "px";
					img.style.top  = document.documentElement.scrollTop  + event.y + "px";
				}else{
					img.style.left = e.pageX + "px";
					img.style.top  = e.pageY + "px";
				}
				img.src = thumb;
				img.style.display = 'block';
			};
			a[i].onmouseout = img.onmouseout;
		}
	}
}
if(window.addEventListener){
	window.addEventListener('load',linkthumb,false);
} else if(window.attachEvent){
	window.attachEvent('onload',linkthumb);
} else {
	window.onload=linkthumb;
}


以下の部分を適宜書き換えることで,自分のサイトはポップアップさせないように設定可能.
if(a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;


Reference

Simple API - ウェブサイト・サムネイル化ツール
http://img.simpleapi.net/

via

halchan's diary
http://www.halchan.org/diary/