A tiny request...

[davedibiase]

I have a script...in Java...the problem is the script wont do what I want it to do :'(. I am not Java-inclined so I request the help of the more forunate persons .

<!-- TWO STEPS TO INSTALL MOUSE TRACKER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site:  http://home.thezone.net/~rbennett/utility/javahead.htm  -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerDC(e){
Xdc = (isNav) ? e.pageX : event.clientX;
Ydc = (isNav) ? e.pageY : event.clientY;
document.dataholder.dcX.value=Xdc;
document.dataholder.dcY.value=Ydc;
}
function handlerMU(e){
Xmu = (isNav) ? e.pageX : event.clientX;
Ymu = (isNav) ? e.pageY : event.clientY;
document.dataholder.muX.value=Xmu;
document.dataholder.muY.value=Ymu;
}
function handlerMD(e){
Xmd = (isNav) ? e.pageX : event.clientX;
Ymd = (isNav) ? e.pageY : event.clientY;
document.dataholder.mdX.value=Xmd;
document.dataholder.mdY.value=Ymd;
}
function handlerMM(e){
Xmm = (isNav) ? e.pageX : event.clientX;
Ymm = (isNav) ? e.pageY : event.clientY;
document.dataholder.mmX.value=Xmm;
document.dataholder.mmY.value=Ymm;
}
function handlerMO(e){
Xmo = (isNav) ? e.pageX : event.clientX;
Ymo = (isNav) ? e.pageY : event.clientY;
document.dataholder.moX.value=Xmo;
document.dataholder.moY.value=Ymo;
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
document.captureEvents(Event.MOUSEOVER);
document.captureEvents(Event.MOUSEUP);
document.captureEvents(Event.DBLCLICK);
}
document.onmouseover = handlerMO;
document.onmousedown = handlerMD;
document.onmouseup   = handlerMU;
document.onmousemove = handlerMM;
document.ondblclick  = handlerDC;
// End -->
</script>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<center>
<form name="dataholder">
<table border=1>
<tr>
<td></td>
<td><i>X value</i></td>
<td><i>Y value</i></td>
</tr>
<tr><td><center>Move</center></td>
<td><input type="text" size=5 name="mmX" value="0"></td>
<td><input type="text" size=5 name="mmY" value="0"></td>
</tr>
<tr><td><center>Up</center></td>
<td><input type="text" size=5 name="muX" value="0"></td>
<td><input type="text" size=5 name="muY" value="0"></td>
</tr>
<tr>
<td><center>Down</center></td>
<td><input type="text" size=5 name="mdX" value="0"></td>
<td><input type="text" size=5 name="mdY" value="0"></td>
</tr>
<tr>
<td><center>DblClick</center></td>
<td><input type="text" size=5 name="dcX" value="0"></td>
<td><input type="text" size=5 name="dcY" value="0"></td>
</tr>
<tr>
<td><center>Over</center></td>
<td><input type="text" size=5 name="moX" value="0"></td>
<td><input type="text" size=5 name="moY" value="0"></td>
</tr>
</table>
</form>
<br>

Now try running that and see what you get. Its just a script that gives you the coorindates. I have tampered with it all I could but it's just not happening. If someone could PLEASE edit the code so that it does the below:

It does not HAVE to place the coordinates in a form but instead into a link like so:
<a href="map.asp?x=651&y=445">GO TO MAP</a>

I know its possible just can't figure the damned thing out :'(

Your help is MUCH appreciated!

Thank you.

[creole]

Just so you know, that's not Java...it's Javascript.

[davedibiase]

lol...you know what I mean ...can someone post an answer PLEASE :'(

[Flawless_koder]

Sorry to do this.
I'm sure i'll be able to answer it.. but it's a long post and a bit daunting right now.
Just to let you know to hang on in there.
I'll read through it and answer it in the morning
(6.30 uk time now)

Thanks

Flawless

[davedibiase]

Well let me put this in to a little more perspective if you are going to be so generous to offer your time.

Now the page which this script is on has a large map (satellite image). The image is always in the constant position (top left), therefore with an ASP database I am planning to track locations that the person clicks on depending on the x and y coordinates. The problem is I couldn't figure out a way to carry the coordinates that the person clicked on. So the easiest more optimized way of doing it is by querystring. Not to secure but I have ways to fix that.

Whenever the person click on the image I would like it to go to the page which stores the info:

<a href="cords.asp?x=[enter value]&y=[enter value]">

Thats basically it.

Thank you for your help.

[Flawless_koder]

And incase you were wondering ... NO!!!!


You have an image.
give the image an onclick.

The onclick sparks a function

window.event.X
window.event.screenX
window.event.type
window.event.srcELement


Use these properties to work out where they've clicked, and turn it into a co-ordinate... that's the way to do it.

If you don't get what i mean.. don't be afraid to ask, and i'll explain further,

Flawless


p.s. if i mis-read, i'm sorry

[davedibiase]

Needs further explanation...

[davedibiase]

ok this is the best way to do it...I am doing to describe exactly how the script should run. I was currently looking through some JavaScript and I picked up a few keywords to help explain the script flow:

Here is the image and the link for the image:

<a href="coord.asp" onClick="function()"><img src="map.gif"></a>

I am guessing thats how it would look.

Now the actual script would run kinda like this unless you have a better idea:

<script>

A - Set what the on click function name is (of coarse)

B - Get coordinates that the person clicked on.

C - Redirect the person with the page link and coordinates in querystring: coord.asp?x= [X VALUE]&y= [Y VALUE]

</script>

That HAS to be possible...I dont know JavaScript but thats the logic I thought up for it.

[Flawless_koder]

<img src="map.gif" style="cursor:hand">

<script>
var de=document.getElementById;
function func(){
      var X=event.x;
      var Y=event.y;
      // img = the id of your image which we're talking about
      var X = X - (de('img').pixelLeft);
      var Y = Y - (de('img').pixelRight);
      top.location.href="coord.asp?x="+X+",y="Y";
      }
</script>

You should see if these x and y settings actually take your image as the parent or not.
Use an alert instead of the location to find out more conclusively.

Flawless

[davedibiase]

Thank you soo very much kind sir ...

Note that there is a few syntax problems with the good but anyways here is my revised code: (For some reason I find syntax on different languages exteremely easy!

<script>
var de=document.getElementById;
function func()
{
      var X=event.x;
      var Y=event.y;
      // img = the id of your image which we're talking about
      var X = X - (de('img').pixelLeft);
      var Y = Y - (de('img').pixelRight);
      top.location.href="coord.asp?x=" +X + "&y=" + Y;
}
</script>

[davedibiase]

arg...another problem :'(

<html>
<script>
var de=document.getElementById;
function func()
{
      var X = event.x;
      var Y = event.y;
      var X = X - (de('img').pixelLeft);
      var Y = Y - (de('img').pixelRight);
      top.location.href="coord.asp?x=" + X + "&y=" + Y;
}
</script>
<body text="#FFFFFF" bgcolor="#000000" topmargin="0" leftmargin="0">

<p align="left"><img border="0" src="Maps/avhrr16.jpg" style="cursor:hand" onClick="func()"><br>
<font face="Tahoma" size="2">[ <a href="reload.asp">Reload Map</a> ]</font></p>
</body>
</html>

Thats exactly what I am putting and I get this error:

Line: 7
Error: Object required!

?!?!?!

[MarcusJT]

You're trying to reference the image by ID, but you haven't given it one!! Nor have you made the ID in the function a variable. Even easier is to completely sidestep the whole GetByElementID stuff and pass the image object itself as a parameter, like so (not tested in NS, but should be fine):

<HTML>
<SCRIPT>
function func(imgObj)
{
	var X = window.event.offsetX;
	var Y = window.event.offsetY;
	var URL = "coord.asp?x=" + X + "&y=" + Y;
	//alert(URL);
	top.location.href=URL;
}
</SCRIPT>
<BODY TEXT="#FFFFFF" BGCOLOR="#000000" TOPMARGIN="0" LEFTMARGIN="0">
<P ALIGN="left">
	<IMG BORDER="0" SRC="Maps/avhrr16.jpg" STYLE="cursor:hand" onClick="func(this)"><BR>
	<FONT FACE="Tahoma" SIZE="2">[ <A HREF="reload.asp">Reload Map</A> ]</FONT>
</P>
</BODY>
</HTML>

M@rco

[Flawless_koder]

Firstly... document.getElementById
is NOT a requirement here. Neither is it a requirement to pass any variables around. You're just creating more handles, element references etc.

better off using event.srcElement for inside a function

Flawless

[MarcusJT]

Come to think of it, my code didn't even need the image object anyway (it wasn't using it)! HEre's the cleaned up code:

<HTML>
<SCRIPT>
function func()
{
	var X = window.event.offsetX;
	var Y = window.event.offsetY;
	var URL = "coord.asp?x=" + X + "&y=" + Y;
	top.location.href = URL;
}
</SCRIPT>
<BODY TEXT="#FFFFFF" BGCOLOR="#000000" TOPMARGIN="0" LEFTMARGIN="0">
<P ALIGN="left">
	<IMG BORDER="0" SRC="Maps/avhrr16.jpg" STYLE="cursor:hand" onClick="func();"><BR>
	<FONT FACE="Tahoma" SIZE="2">[ <A HREF="reload.asp">Reload Map</A> ]</FONT>
</P>
</BODY>
</HTML>

M@rco

[davedibiase]

Works perfectly guys...but I did notice that it kinda introduces another problem. The x and y start at the top left of the image rather then of the actual page.

Now I need a simple script which places an image on that image according to the coordinates. It sounds weird, I know but its a must!

Thanks for your support!