SimpleAPIを使ったサムネイルPopUp
リンク(<a href="〜" ...)にマウスポインタを乗せると、サムネイルを表示するJavaScript。
SimpleAPIを使いました。
このJavaScriptファイルをscriptタグにて組み込むだけでOK。
function addListener(elem,eventType,func,cap) { if(elem.addEventListener) { elem.addEventListener(eventType, func, cap); } else if(elem.attachEvent) { elem.attachEvent('on' + eventType, func); } } function PopUpSimpleAPI(dummy) { var PopupDiv = document.createElement('div'); var AnchorNode = document.links; PopupDiv.id = "popup"; PopupDiv.style.visibility = "hidden"; PopupDiv.style.position = "absolute"; document.getElementsByTagName("body").item(0).appendChild(PopupDiv); for(i=0;i<AnchorNode.length;i++) { addListener( AnchorNode[i], 'mouseover', function (e) { if(e.target) { target = e.target; } else { target = e.srcElement; } if(target!=target.href) { target = target.parentNode; } if(e.pageX) { x = e.pageX; y = e.pageY; } else if(typeof document.body.style.maxHeight!="undefined") { x = e.clientX + document.documentElement.scrollLeft; y = e.clientY + document.documentElement.scrollTop; } else { x = e.clientX + document.body.scrollLeft; y = e.clientY + document.body.scrollTop; } MouseIn = true; PopupDiv.innerHTML = '<img src="http://img.simpleapi.net/small/' + target + '" />'; PopupDiv.style.left = (x-20) + "px"; PopupDiv.style.top = (y+20) + "px"; PopupDiv.style.visibility = 'visible'; }, true ); addListener( AnchorNode[i], 'mousemove', function (e) { if(MouseIn) { if(e.pageX) { x = e.pageX; y = e.pageY; } else if(typeof document.body.style.maxHeight!="undefined") { x = e.clientX + document.documentElement.scrollLeft; y = e.clientY + document.documentElement.scrollTop; } else { x = e.clientX + document.body.scrollLeft; y = e.clientY + document.body.scrollTop; } PopupDiv.style.left = (x-20) + "px"; PopupDiv.style.top = (y+20) + "px"; PopupDiv.style.visibility = 'visible'; } }, false ); addListener( AnchorNode[i], 'mouseout', function (e) { PopupDiv.style.visibility = 'hidden'; MouseIn = false; }, false ); } addListener( PopupDiv, 'click', function (e) { PopupDiv.style.visibility = 'hidden'; MouseIn = false; }, false ); } addListener(window,'load',PopUpSimpleAPI,false);
「ガンダム00を見たか?」という私のサイトに入れて見ました。