*
マウスカーソルがこのレイヤーの下辺より上か下かのメッセージが出ます
下辺より上です
下辺より下です
| getBOTTOM('レイヤ?名') |
Win n4 n6 moz e4 e5 e6 o6,
Mac n4 n6 moz e4.5 e5 ,
Linux n4 n6 moz |
| ブラウザ(または親要素)上端からのレイヤ?下辺位置をピクセルで取得するためのサンプルファンクション。 |
<script language='JavaScript'>
<!--
/*//////// ↓関数の中身に触らなくてもコピペで使えます */ /*////////// レイヤ?下辺Y座標get用関数 20020311 UseFree ======================================================== Win n4 n6 moz e4 e5 e6 o6 , Mac n4 n6 moz e4.5 e5 , Linux n4 n6 moz n(Netscape) e(IE) O(Opera) ======================================================== 使用例 //ブラウザ(または親要素)上端からの //レイヤ?下辺位置をピクセルで取得する //Moz,NN6では初期値がなければ空白が返る getBOTTOM('レイヤ?名') Support http://game.gr.jp/js/ =======================================================*/ function getBOTTOM(layName){ if(document.all){ //e4,e5,e6,o6用 return document.all(layName).style.pixelTop +document.all(layName).style.pixelHeight } else if(document.getElementById){ //n6,m1用 var t = document.getElementById(layName).style.top var h = document.getElementById(layName).style.height return ( t!="" && h!="" )?parseInt(t)+parseInt(h):"" } else if(document.layers){ //n4用 return document.layers[layName].top +document.layers[layName].clip.height } } /*//////////////// レイヤ?下辺Y座標get用関数ここまで */ /*//////// ↑関数の中身に触らなくてもコピペで使えます */
/*////////////////マウス位置取得用関数 2002.2.11 UseFree
========================================================
Win n4 n6 moz e4 e5 e6 o6,
Mac n4 n6 moz e4.5 e5,
Linux n4 n6 moz
========================================================
◎書式
getMouseX(event)
getMouseY(event)
◎使用例
document.onmousedown = mdwn
function mdwn(e){
alert("X = " + getMouseX(e)+":Y = " + getMouseY(e))
}
◎引数解説
event : イベントオブジェクト
Support http://game.gr.jp/js/
======================================================*/
function getMouseX(e){
if(window.opera)
return e.clientX
else if(document.all)
return document.body.scrollLeft+event.clientX
else if(document.layers||document.getElementById)
return e.pageX
}
function getMouseY(e){
if(window.opera)
return e.clientY
else if(document.all)
return document.body.scrollTop+event.clientY
else if(document.layers||document.getElementById)
return e.pageY
}
/*////////////////////// マウス位置取得用関数ここまで */
function moveLAYER(layName,x,y){
if(document.getElementById){ //Moz,NN6,IE5用
document.getElementById(layName).style.left=x
document.getElementById(layName).style.top=y
}
else if(document.all){
document.all(layName).style.pixelLeft=x //IE4用
document.all(layName).style.pixelTop=y
}
else if(document.layers)document.layers[layName].moveTo(x,y) //NN4用
}
function setBGCOLOR(layName,color){
if(color=='')color='transparent'
if(document.getElementById) //n6,m1,e5,e6,o6用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
//--マウスを動かすとmmv()を実行します
document.onmousemove = mmv
//-Operaの全画面Event拾えない対策
if(window.opera){
op_dmydoc =''
+' '
document.write(op_dmydoc)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
function mmv(e){
if( getMouseY(e) <= getBOTTOM('a0') ){
moveLAYER('msg1',-300,-300)
moveLAYER('msg0',50,140)
} else {
moveLAYER('msg0',-300,-300)
moveLAYER('msg1',50,200)
}
}
//-->
</script>
<body onload="setBGCOLOR('a0','orange')">
<div id="a0"
style="position : absolute ;
left : 10px ;
top : 80px ;
width : 300px ;
height : 100px ;
clip : rect(0,300,100,0) ;
font-size : 12pt ;
">マウスカーソルがこのレイヤーの下辺より上か下かのメッセージが出ます
</div>
<div id="msg0"
style="position : absolute ;
left : -200px ;
top : -200px ;
font-size : 20pt ;
">
下辺より上です
</div>
<div id="msg1"
style="position : absolute ;
left : -200px ;
top : -200px ;
font-size : 20pt ;
">
下辺より下です
</div>
* 緑文字が今回の関数
* 赤文字がこのスクリプトで最初に動作する部分
|
| ブラウザ画面上端からレイヤ?下辺(可視のclip範囲内の下辺)までのピクセル数を取得するためのサンプルファンクションです。レイヤ?の下端がぺ?ジの上端から何ピクセルあるか？ということです。 N4ではtopとclip.heightを、Moz,NN6ではtopとheightを、IE4,IE5,IE6,O6ではpixelTopとpixelHeightを足しています。上記サンプルのではonmouseoverやhoverよりも細かい設定が可能です。注:CSSのwidth,height,clipをインラインで指定してください。N6,Moz,IE6ではインラインで指定していない場合初期値は空白です。 |
|
★次のページにサンプルと応用スクリプトを用意しました。
|
次のページ→|
シリーズ目次 |
