Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed

文書の過去の版を表示しています。


Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed

Popup the image on which a mouse is rolled over

mouseの位置を取るjavascriptを利用して、あるイメージをpopupさせる方法を紹介する。 簡単だから、コードを見ながら説明する。

function showPopUp(id, e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }else {			//IE
        var de = document.documentElement;	//Strict Mode(offset=2,2)
        var b = document.body;			//Quirks Mode(offset=0,0)
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    picLayer = document.getElementById(id);
    var picWidth = picLayer.clientWidth;
    var picHeight = picLayer.clientHeight;
 
    if (picLayer.style.visibility.charAt(0) == "v") return;
    picLayer.style.visibility = "visible";
 
    var xOffset = getWinXOffset();
    var yOffset = getWinYOffset();
 
    picLayer.style.left = xOffset+cursor.x- (picWidth+15);
    picLayer.style.top  = yOffset+cursor.y- (picHeight+50);
}

前半部分はmouseで説明したので、参考してほしい。


QR Code
QR Code study:javascript:event:mouse (generated for current page)