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 cursor positionで説明したので、参考してほしい。
ここで'id'という引数はイメージファイルのidで、レイヤーに囲んでくれれば良い。
肝心なのはmouseの座標を取り、イメージのサイズを考慮して表示するということである。
その際、visibility属性を'visible'で変えることを忘れずに
ちなみに、getWinXOffset(),getWinYOffset()はWindowのoffsetのx座標、ｙ座標を計算して返すメソッドである。

xOffsetの取得

function getWinXOffset(){
  if(window.scrollX) return window.scrollX; // Moziila
  if(window.pageXOffset) return window.pageXOffset; // Opera, NN4
  if(document.documentElement && document.documentElement.scrollLeft){ // 以下 IE
    return document.documentElement.scrollLeft;
  }else if(document.body && document.body.scrollLeft){
    return document.body.scrollLeft;
  }
  return 0;
}

yOffsetの取得

function getWinYOffset(){
  if(window.scrollY) return window.scrollY; // Mozilla
  if(window.pageYOffset) return window.pageYOffset; // Opera, NN4
  if(document.documentElement && document.documentElement.scrollTop){ // 以下 IE
     return document.documentElement.scrollTop;		         //Strict Mode	
  }else if(document.body && document.body.scrollTop){
     return document.body.scrollTop;				//Quirks Mode
  }
  return 0;
}