By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,938 Members | 1,555 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,938 IT Pros & Developers. It's quick & easy.

How can I show coordinates relative to an image instead of the browserwindow?

P: n/a
M
Hi all,

This is the script I use to find coordinates on a map and transfer
them to textfields in the openerwindow.
++++++++++++++++++++++++
<HTML>
<HEAD>
<TITLEMouse Coords </TITLE>
<script language="JavaScript">
<!--
currentX = 0;
currentY = 0;

// Netscape 4.x and 6 function
function markCoords(e) {
currentX = e.pageX;
currentY = e.pageY;
showCoords();
}
function fillFields() {
document.all.menu.style.left = event.clientX;
document.all.menu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
self.opener.document.pf.wooninfopic3.value = icoony
self.opener.document.pf.wooninfopic2.value = icoonx
}

function showCoords() {
document.all.menu.style.left = event.clientX;
document.all.menu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
document.all.menu.innerHTML = "<table cellpadding=0 cellspacing=0
border=0><tr><td nowrap bgcolor=white>left: " + icoonx + "<BR>top: " +
icoony + "</td></tr></table>";
}

// Make the browser aware of mouse-action
// Netscape 4.7
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE|Event.MOUSE DOWN);
document.onmousemove = markCoords;
// Netscape 6
} else if (document.getElementById && !document.all) {
document.addEventListener("mousemove", markCoords, false);
} else {
// Asume IE
document.onmousemove = showCoords;
}

//-->
</script>
</HEAD>

<BODY style="background: url('http://www.lelystad.nl/internet/pic/
20075_achtergrond_licht.jpg');background-repeat: no-repeat; margin:
0px;">
<img src="http://www.lelystad.nl/_internet/img/spacer.gif"
width="713px" height="711px" vspace="0" hspace="0" border="0"
onClick="fillFields()">
<div id="menu" style="position:absolute;"></div>

<layer id="nsLayer" width="100" height="100"></layer>

</BODY>
</HTML>
+++++++++++++++++++++++++
With this script I need to have a full view of the image to pass the
coords. But when I want to use a larger map (e.g. 2000x2000px) I have
to scroll which makes the coords useless because they are relative to
the border of the browser window.
I really hope you can help me out.
TIA

Marco Hoefman

Mar 8 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On Thu, 08 Mar 2007 09:23:49 +0100, M@r(o <m.*******@lelystad.nlwrote:
Hi all,

This is the script I use to find coordinates on a map and transfer
them to textfields in the openerwindow.
++++++++++++++++++++++++
<HTML>
<HEAD>
<TITLEMouse Coords </TITLE>
<script language="JavaScript">
<!--
currentX = 0;
currentY = 0;

// Netscape 4.x and 6 function
function markCoords(e) {
currentX = e.pageX;
currentY = e.pageY;
showCoords();
}
function fillFields() {
document.all.menu.style.left = event.clientX;
document.all.menu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
self.opener.document.pf.wooninfopic3.value = icoony
self.opener.document.pf.wooninfopic2.value = icoonx
}

function showCoords() {
document.all.menu.style.left = event.clientX;
document.all.menu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
document.all.menu.innerHTML = "<table cellpadding=0 cellspacing=0
border=0><tr><td nowrap bgcolor=white>left: " + icoonx + "<BR>top:" +
icoony + "</td></tr></table>";
}

// Make the browser aware of mouse-action
// Netscape 4.7
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE|Event.MOUSE DOWN);
document.onmousemove = markCoords;
// Netscape 6
} else if (document.getElementById && !document.all) {
document.addEventListener("mousemove", markCoords, false);
} else {
// Asume IE
document.onmousemove = showCoords;
}

//-->
</script>
</HEAD>

<BODY style="background: url('http://www.lelystad.nl/internet/pic/
20075_achtergrond_licht.jpg');background-repeat: no-repeat; margin:
0px;">
<img src="http://www.lelystad.nl/_internet/img/spacer.gif"
width="713px" height="711px" vspace="0" hspace="0" border="0"
onClick="fillFields()">
<div id="menu" style="position:absolute;"></div>

<layer id="nsLayer" width="100" height="100"></layer>

</BODY>
</HTML>
+++++++++++++++++++++++++
With this script I need to have a full view of the image to pass the
coords. But when I want to use a larger map (e.g. 2000x2000px) I have
to scroll which makes the coords useless because they are relative to
the border of the browser window.
I really hope you can help me out.
TIA

Marco Hoefman
You could get rid of the browser-specific scripting and have a scrollable
map and receive the correct co-ordinates by showing the image on an html
button control inside a form. If someone clicks the button, the browser
automatically sends the co-ordinates relative to the button's top left
(being (0,0)) to the form handler. That form handler could then read the
co-ordinates from the POST or QUERYSTRING parameters and either push it to
the opener window, or have it ready for the opener window to pull them
autonomously.

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Mar 11 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.