[Mapserver-users] How to get X and Y pixel coordinates with JavaScript

Wed Jul 21 04:29:57 EDT 2004

First of all, you'll probably encounter difficulties to have 
cross-browser compatibility with such a simple javascript.
You may want to use a cross-browser library. As Steve Lime uses CBE for 
his DHTML Landview interface, I prefered the new X library (its 
substitute). Find it at http://www.cross-browser.com.
An other choice could be the DynAPI library.
Well this is for browser compatibility.

Then the aim is to use "event handlers" on a target DIV to get the mouse 
coordinates.

See the simple exemple below.

Regards

Pierre GIRAUD
camptocamp.com

ps : if you want to see a working exemple of DHTML interface, follow 
this link http://sitn.ne.ch.
Note that it doesn't answer to your needs because the page is reloaded 
each time the user navigates. Steve Lime's work does.

------- to use this, you'll need to download the required X library's 
files in a "js" folder --------------------------------

<html>
<head>
<title> [Mouse Events]</title>
<script type='text/javascript' src='js/x_core_nn4.js'></script>
<script type='text/javascript' src='js/x_event_nn4.js'></script>
<script language="JavaScript">
onload = init
function init() {
    mylayer = xGetElementById("mylayerDiv")
    xAddEventListener(mylayer,'mousedown',layerDownHandler)
    xAddEventListener(mylayer,'mouseup',layerUpHandler)
}

function layerDownHandler(evt) {
    var e = new xEvent(evt)
    var x = e.offsetX
    var y = e.offsetY
    document.myform.downx.value = x
    document.myform.downy.value = y
    return false
}

function layerUpHandler(evt) {
    var e = new xEvent(evt)
    var x = e.offsetX
    var y = e.offsetY
    document.myform.upx.value = x
    document.myform.upy.value = y
    return false
}
</script>
<style text="text/css">
<!--
#mylayerDiv {position:absolute; left:150; top:80; width:300; height:200; 
clip:rect(0,300,200,0); background-color:#C0C0C0; 
layer-background-color:#C0C0C0;}
-->
</style>
</head>

<body bgcolor="#ffffff">

<b>Layer-based mouse events</b>

<form name="myform">

down X: <input type="text" name="downx" size=3>
<br>down Y: <input type="text" name="downy" size=3>

<p>up X: <input type="text" name="upx" size=3>
<br>up Y: <input type="text" name="upy" size=3>

</form>

<div id="mylayerDiv">
</div>

</body>
</html>

-------------------------------------------------------------------------

Merlos wrote:

>Hello,
>
>	Maybe someone can help me. I was wondering if when an user clicks on the 
>image that is on an <input type="image"> element it is possible to capture 
>the X and Y coordinates before the submission is done. I mean:
>
><script type="text/javascript">
>
>function formSubmit() {
>//Here get the X and Y coords in pixels... Is it possible? How?
>}
><form name="apatruyando" action="JavaScript:formSubmit()">
><input type="image" src="image_url.png" />
></form>
>
>The idea is to change with the JS the  image src atribute of the input type 
>each time the user clicks on, that way it wouldn't be necessary to refresh 
>all the page.
>
>
>Thank you.
>_______________________________________________
>Mapserver-users mailing list
>Mapserver-users at lists.gis.umn.edu
>http://lists.gis.umn.edu/mailman/listinfo/mapserver-users
>
>
>  
>