473,672 Members | 2,435 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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="JavaS cript">
<!--
currentX = 0;
currentY = 0;

// Netscape 4.x and 6 function
function markCoords(e) {
currentX = e.pageX;
currentY = e.pageY;
showCoords();
}
function fillFields() {
document.all.me nu.style.left = event.clientX;
document.all.me nu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
self.opener.doc ument.pf.woonin fopic3.value = icoony
self.opener.doc ument.pf.woonin fopic2.value = icoonx
}

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

// Make the browser aware of mouse-action
// Netscape 4.7
if (document.layer s) {
document.captur eEvents(Event.M OUSEMOVE|Event. MOUSEDOWN);
document.onmous emove = markCoords;
// Netscape 6
} else if (document.getEl ementById && !document.all) {
document.addEve ntListener("mou semove", markCoords, false);
} else {
// Asume IE
document.onmous emove = showCoords;
}

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

<BODY style="backgrou nd: url('http://www.lelystad.nl/internet/pic/
20075_achtergro nd_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="fillFi elds()">
<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 2192
On Thu, 08 Mar 2007 09:23:49 +0100, M@r(o <m.*******@lely stad.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="JavaS cript">
<!--
currentX = 0;
currentY = 0;

// Netscape 4.x and 6 function
function markCoords(e) {
currentX = e.pageX;
currentY = e.pageY;
showCoords();
}
function fillFields() {
document.all.me nu.style.left = event.clientX;
document.all.me nu.style.top = event.clientY;
var icoonx = event.clientX - 10;
var icoony = event.clientY - 10;
self.opener.doc ument.pf.woonin fopic3.value = icoony
self.opener.doc ument.pf.woonin fopic2.value = icoonx
}

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

// Make the browser aware of mouse-action
// Netscape 4.7
if (document.layer s) {
document.captur eEvents(Event.M OUSEMOVE|Event. MOUSEDOWN);
document.onmous emove = markCoords;
// Netscape 6
} else if (document.getEl ementById && !document.all) {
document.addEve ntListener("mou semove", markCoords, false);
} else {
// Asume IE
document.onmous emove = showCoords;
}

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

<BODY style="backgrou nd: url('http://www.lelystad.nl/internet/pic/
20075_achtergro nd_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="fillFi elds()">
<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
148596
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 value="">Please make a selection</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option>
3
63395
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 display (in the status bar) the image coordinates of the mouse location. However, if I use the picturebox's MouseMove event, I am getting the coordinates of the mouse over the PICTUREBOX, not the actual image underneath that (which is stretched)....
4
2449
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 page (first when user press the button, and the second when he releases it). Those two points are going to be send to the web application (i.e. with AJAX) and saved in a database.
0
10687
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) coordinates. But if the (x,y) coordinates are too far to the right, then the "tip" of the balloon now points to some spurious coordinate that's unrelated to my (x,y). Why? How can I stop this? How can I make the balloon's tip point exactly where I...
1
3387
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 fill two text boxes with the X and Y coordinates of that click, but the coordinates need to be based in the image only not in the whole form. I did not find anything that tells me about this in the internet. Does somebody here already did something...
3
21256
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' src='picture.gif' name='myimage' id='myimage'> </form> When forms with image types are submitted, the value is not returned; instead, when the form is submitted, the XY coordinates of the where the user clicked on the image are sent. For example, if the user
3
4520
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; Pseudo code below: function Drop(obj) {
4
6068
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 see post data contains next additional values: Image1.x=121 and Image1.y=64 These values are coordinates of clicked point relative to image.
2
2547
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 is. But I am getting two distinct sets of coordinates if I change the angle from zero to 270. Here's the relevant code:
0
8408
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8932
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8611
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8685
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7449
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6240
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4230
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4421
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1819
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.