Rev. 2.73

사이트의 썸네일 이미지(미리보기 이미지)를 생성해주는 엔진을 이용한 링크의 썸네일 팝업 스크립트입니다. 외부로 링크되는 곳의 사이트 모양을 미리 볼 수 있어 여럼으로 편리합니다. 지정한 영역에 해당하는 A 노드의 배열을 만들고 URL을 분석하여 링크에 마우스를 오버하면 해당하는 사이트 썸네일을 팝업으로 표시합니다. 늘 그렇듯이 Prototype 프레임웍 기반으로 만들었습니다. IE와 파이어폭스에서 정상으로 작동하는 것을 확인했습니다.

테스트 : 야후닷컴, 구글닷컴, 네이뵤, 다음, 올블로그

// Sitelink thumbnail
// Developer: FireJune(http://firejune.com)

var Linkthumb = {
align:function(array) {
var thisUrl = document.domain;
if (thisUrl.split('.')[0] == 'www')
thisUrl = thisUrl.substring(4, thisUrl.length);
$$(array).each(function(element) {
var url = element.href;
if(url.indexOf(thisUrl) == -1) {
var img = Linkthumb.create(url);
element.appendChild(img);
Event.observe(element, 'mouseover', function(){img.style.display = 'block'});
Event.observe(element, 'mouseout', function(){img.style.display = 'none'});
}
});
},
create:function(url) {
var img = document.createElement('IMG');
var url = url.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
img.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ url;
img.className = 'linkthumb';
img.alt = url;
img.style.display = 'none';
return img;
}
}
// Style.css
.linkthumb{
z-index:9999; position:absolute; margin:18px 0 0 -160px;
border-right:2px solid #888; border-bottom:2px solid #888}
// 사용하기
Linkthumb.align('#content a');

- 지정한 영역의 배열을 만든다.
- 자신의 도메인을 분석한다.
- 배열에서 자신의 URL은 거부한다.
- 배열에 이미지 노드를 추가한다.
- 배열에 마우스 오버, 아웃 이벤트를 추가한다.

Comments