Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How can I show coordinates relative to an image instead of the browserwindow?

Reply
Thread Tools

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

 
 
M@r(o
Guest
Posts: n/a
 
      03-08-2007
Hi all,

This is the script I use to find coordinates on a map and transfer
them to textfields in the openerwindow.
++++++++++++++++++++++++
<HTML>
<HEAD>
<TITLE> Mouse 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

 
Reply With Quote
 
 
 
 
OmegaJunior
Guest
Posts: n/a
 
      03-11-2007
On Thu, 08 Mar 2007 09:23:49 +0100, M@r(o <(E-Mail Removed)> wrote:

> Hi all,
>
> This is the script I use to find coordinates on a map and transfer
> them to textfields in the openerwindow.
> ++++++++++++++++++++++++
> <HTML>
> <HEAD>
> <TITLE> Mouse 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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
QWebView: Get coordinates of an element and simulate a relative tothis position. Gelonida Python 0 02-19-2011 03:07 PM
how to show x y coordinates of the cursor wai-tak sit HTML 5 09-09-2006 08:16 PM
Converting canvas coordinates to window coordinates in tkinter......... Suresh Kumar Python 0 07-04-2003 10:14 AM
Converting canvas coordinates to window coordinates....... Suresh Kumar Python 0 07-03-2003 04:53 AM



Advertisments