study:javascript:event:mouse

[ Please fill this placeholder (:wiki:site_notice) ]

現在位置: start » study » javascript » event » mouse

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== Popup the image on which a mouse is rolled over ======
mouseの位置を取るjavascriptを利用して、あるイメージをpopupさせる方法を紹介する。
簡単だから、コードを見ながら説明する。
<code javascript>
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);
}
</code>
前半部分は[[study:javascript:event|Mouse cursor position]]で説明したので、参考してほしい。\\
ここで'id'という引数はイメージファイルのidで、レイヤーに囲んでくれれば良い。\\
肝心なのはmouseの座標を取り、イメージのサイズを考慮して表示するということである。\\
その際、**visibility**属性を'visible'で変えることを忘れずに;-)\\
ちなみに、**%%getWinXOffset()%%**,**%%getWinYOffset()%%**はWindowのoffsetのx座標、ｙ座標を計算して返すメソッドである。\\

{{keywords>popup image}}


===== Get the offset of window =====
xOffsetの取得
<code javascript>
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;
}
</code>
yOffsetの取得
<code javascript>
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;
}
</code>

トレース: • enumerated_type • implement2 • debug • backup • tip • csv • factory • implement3 • select • struts2

ナビゲーション

検索

ツールボックス

QR Code