2008-02-01

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を見たか？」という私のサイトに入れて見ました。