473,326 Members | 2,081 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

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
1 2175
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected...
3
by: Tom | last post by:
I have a picturebox on my VB.NET form. The picturebox size mode is set to stretched. I then load an image into that form and display it. As the user moves the mouse over the form, I want to get and...
4
by: Tomasz Bak | last post by:
Hello, I have a simple problem: mark a list of defects on an image. I think the best way to do it is to select a single deffect, then take two coordinates of coursor form an image on a web...
0
by: Lucian Wischik | last post by:
I'm using ToolTip.Show(x,y,..) to show my balloon-style tooltip at a specified coordinate. Most of the time it works fine and the "tip" of the balloon points exactly to my specified (x,y)...
1
by: emferrari | last post by:
Hi all I'm developing a windows form application that has a picturebox in which I'll load screen prints from a jpg file. I want the user to click in one point in the image and after the click...
3
by: jackiepatti | last post by:
QUESTION: I have a web page containing a form that contains an image instead of a submit button, e.g. <form name='myform' action='get' method='otherpage.asp'> <input type='image'...
3
by: MarkusJNZ | last post by:
Hi all, I have a page which allows a user to drag and drop one or more images on a page. I have a function which is passed in a reference to the item being dragged so I can do things like; ...
4
by: marss | last post by:
Example: <form action="..." method="post"> <input type=image name="Image1" onclick="beforeSubmit();" src="..."/> </form> When I click on the image the form submitted to the server. As I can...
2
by: laredotornado | last post by:
Hi, I'm using php 4.4.4. Maybe I'm misreading the docs, but in the imagettfbbox manual (http://us2.php.net/imagettfbbox), it says that text coordinates are the same regardless of what the angle...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.