Event offsetY and offsetY : Event Properties « Event « JavaScript DHTML






  1. JavaScript DHTML
  2. Event
  3. Event Properties

Event offsetY and offsetY

 
    
<script language="JavaScript">
function function1() {
    myX.innerHTML = window.event.offsetX;
    myY.innerHTML = window.event.offsetY;
    mySX.innerHTML = window.event.screenX;
    mySY.innerHTML = window.event.screenY;
    mySH.innerHTML = myDiv.scrollHeight;
    mySW.innerHTML = myDiv.scrollWidth; 
}
function function1() {
    mySL.innerHTML = myDiv.scrollLeft;
    myST.innerHTML = myDiv.scrollTop; 
} 
</script>
<p>
   <b>X Coordinate:</b> 
   <span id="myX">0</span>
</p>
<p>
   <b>Y Coordinate:</b> 
   <span id="myY">0</span>
</p>
<p>
   <b>Screen X:</b> 
   <span id="mySX">0</span>
</p>
<p>
   <b>Screen Y:</b> 
   <span id="mySY">0</span>
</p>
<p>
   <b>Scroll Height:</b> 
   <span id="mySH">0</span>
</p>
<p>
   <b>Scroll Width:</b> 
   <span id="mySW">0</span>
</p>
<p>
   <b>Scroll Left:</b> 
   <span id="mySL">0</span>
</p>
<p>
   <b>Scroll Top:</b> 
   <span id="myST">0</span>
</p>
<div id="myDiv" 
     onmousemove="function1();" 
     onscroll="function1();" 
     style="border:solid; width:200; height:50; overflow:scroll;">
   <img src="http://www.java2s.com/style/logo.png">
</div>








Related examples in the same category

1.Event qualifier
2.Event saveType
3.Event nextPage
4.Event repeat
5.Event return Value
6.Event pageY and pageX
7.Event screenY, screenX
8.Event 'layerY'
9.Event 'layerX'
10.Event 'propertyName'
11.Event from Element
12.Event screenX
13.Event 'target' Example
14.Event 'srcUrn' Example
15.Event source element
16.Event to Element
17.Event type
18.Event y and x Property
19.'contentOverflow' Example
20.'cancelBubble' Example
21.Get event Phase: CAPTURING,BUBBLING