Capturing client-side image coordinates

[Tony Gahlinger]

I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
to do some client-side image processing. I want to capture the sequence of
coordinates a user clicks on in xxx.jpg in the following html

<a href="#"><IMG SRC="xxx.jpg" ISMAP></a>

and save these to a file for later handling. The coordinates appear on
the bottom left of the window as I move the mouse, so I know they're
being passed around somehow, but I haven't figured out how to 'catch'
them. (My apologies if this is a frequent Q. but a web search has led
to an answer). Help much appreciated.

--Tony

[Tony Gahlinger]

Re: Capturing client-side image coordinates

Tony Gahlinger wrote:[color=blue]
> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
> to do some client-side image processing. I want to capture the sequence of
> coordinates a user clicks on in xxx.jpg in the following html
>
> <a href="#"><IMG SRC="xxx.jpg" ISMAP></a>
>
> and save these to a file for later handling. The coordinates appear on
> the bottom left of the window as I move the mouse, so I know they're
> being passed around somehow, but I haven't figured out how to 'catch'
> them. (My apologies if this is a frequent Q. but a web search has led
> to an answer). Help much appreciated.[/color]
^^no^^

Oops! (If it led to an answer it was a null one!).

Any suggestions on how to capture/store clicked coordinates? Thanks.

--Tony

[mscir]

Re: Capturing client-side image coordinates

Tony Gahlinger wrote:[color=blue]
> Tony Gahlinger wrote:[color=green]
>> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
>> to do some client-side image processing. I want to capture the
>> sequence of coordinates a user clicks on in xxx.jpg in the following html[/color][/color]

This uses some mouse tracking code I got from a website, it is used here
as an example, I would recommend looking for a better mouse-tracking
approach, maybe someone here will post a method that doesn't rely upon
browser detection. This works in my IE6, Netscape 7.1, Firefox 0.8 but I
have no idea what other browsers will do, esp. Opera.

What I did here was: track the mouse position, when the image is clicked
send the current mouse coordinates to a function that subtracts the
image position on the page (left, top) to get the image (x, y) position
of the mouse, store those numbers in an array.

I have no idea how to save the array contents to a file, sorry.


<script type="text/javascript">
//TRACK MOUSE BEGIN
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?tr ue:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captur eEvents(Event.M OUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmous emove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.s crollLeft
tempY = event.clientY + document.body.s crollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
//document.Show.M ouseX.value = tempX
//document.Show.M ouseY.value = tempY
return true
}
//TRACK MOUSE END

//array to store mouse coord's
var coords=new Array();

//store mouse coord's in array after normalizing to img top, left

function storepoint(x,y, target){
//alert(x+', '+y+'\nTop '+target.offset Top+' Left '+target.offset Left);
alert((x-target.offsetLe ft)+', '+(y-target.offsetTo p));
//alert(target.of fsetTop);
//alert(document. getElementById( 'img1').left);
coords[coords.length]=[x-target.offsetLe ft,y-target.offsetTo p];
}

function showarr(){
var s1='';
for (var i=0; i<coords.length ; i++)
s1+='\n'+coords[i][0]+', '+coords[i][1];
alert(s1);
}

<img name="img1" id="img1" src="iamges/logo.gif" width="543"
height="113" onmousedown="st orepoint(tempX, tempY, this)">
</p>
<p>
<input type="button" value="Show Contents of Array (click coordinates)"
onclick="showar r()">

Good Luck,
Mike

[Tony Gahlinger]

Re: Capturing client-side image coordinates

mscir wrote:[color=blue]
> Tony Gahlinger wrote:
>[color=green]
>> Tony Gahlinger wrote:
>>[color=darkred]
>>> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007
>>> Firebird/0.7)
>>> to do some client-side image processing. I want to capture the
>>> sequence of coordinates a user clicks on in xxx.jpg in the following
>>> html[/color][/color]
>
>
> This uses some mouse tracking code I got from a website, it is used here
> as an example, I would recommend looking for a better mouse-tracking
> approach, maybe someone here will post a method that doesn't rely upon
> browser detection. This works in my IE6, Netscape 7.1, Firefox 0.8 but I
> have no idea what other browsers will do, esp. Opera.
>
> What I did here was: track the mouse position, when the image is clicked
> send the current mouse coordinates to a function that subtracts the
> image position on the page (left, top) to get the image (x, y) position
> of the mouse, store those numbers in an array.
> ...
> Good Luck,
> Mike
>[/color]

Thanks Mike. That's the part I was looking for.

--Tony

[DU]

Re: Capturing client-side image coordinates

mscir wrote:
[color=blue]
> Tony Gahlinger wrote:
>[color=green]
>> Tony Gahlinger wrote:
>>[color=darkred]
>>> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007
>>> Firebird/0.7)
>>> to do some client-side image processing. I want to capture the
>>> sequence of coordinates a user clicks on in xxx.jpg in the following
>>> html[/color][/color]
>
>
> This uses some mouse tracking code I got from a website, it is used here
> as an example, I would recommend looking for a better mouse-tracking
> approach, maybe someone here will post a method that doesn't rely upon
> browser detection. This works in my IE6, Netscape 7.1, Firefox 0.8 but I
> have no idea what other browsers will do, esp. Opera.
>
> What I did here was: track the mouse position, when the image is clicked
> send the current mouse coordinates to a function that subtracts the
> image position on the page (left, top) to get the image (x, y) position
> of the mouse, store those numbers in an array.
>
> I have no idea how to save the array contents to a file, sorry.
>
>
> <script type="text/javascript">
> //TRACK MOUSE BEGIN
> // Detect if the browser is IE or not.
> // If it is not IE, we assume that the browser is NS.
> var IE = document.all?tr ue:false
>
> // If NS -- that is, !IE -- then set up for mouse capture
> if (!IE) document.captur eEvents(Event.M OUSEMOVE)
>
> // Set-up to use getMouseXY function onMouseMove
> document.onmous emove = getMouseXY;
>
> // Temporary variables to hold mouse x-y pos.s
> var tempX = 0
> var tempY = 0
>
> // Main function to retrieve mouse x-y pos.s
>
> function getMouseXY(e) {
> if (IE) { // grab the x-y pos.s if browser is IE
> tempX = event.clientX + document.body.s crollLeft
> tempY = event.clientY + document.body.s crollTop
> } else { // grab the x-y pos.s if browser is NS
> tempX = e.pageX
> tempY = e.pageY
> }
> // catch possible negative values in NS4
> if (tempX < 0){tempX = 0}
> if (tempY < 0){tempY = 0}
> // show the position values in the form named Show
> // in the text fields named MouseX and MouseY
> //document.Show.M ouseX.value = tempX
> //document.Show.M ouseY.value = tempY
> return true
> }
> //TRACK MOUSE END
>
> //array to store mouse coord's
> var coords=new Array();
>
> //store mouse coord's in array after normalizing to img top, left
>
> function storepoint(x,y, target){
> //alert(x+', '+y+'\nTop '+target.offset Top+' Left '+target.offset Left);
> alert((x-target.offsetLe ft)+', '+(y-target.offsetTo p));
> //alert(target.of fsetTop);
> //alert(document. getElementById( 'img1').left);
> coords[coords.length]=[x-target.offsetLe ft,y-target.offsetTo p];
> }
>
> function showarr(){
> var s1='';
> for (var i=0; i<coords.length ; i++)
> s1+='\n'+coords[i][0]+', '+coords[i][1];
> alert(s1);
> }
>
> <img name="img1" id="img1" src="iamges/logo.gif" width="543"
> height="113" onmousedown="st orepoint(tempX, tempY, this)">
> </p>
> <p>
> <input type="button" value="Show Contents of Array (click coordinates)"
> onclick="showar r()">
>
> Good Luck,
> Mike
>[/color]

That's awful! With MSIE, all you need to get is the offsetX and offsetY
event properties. That's all: no need for complex equations.
With Opera 7.x, you need to substract the border width from
event.offsetX/Y because there is a bug related to this (bug 123306).

With Mozilla, you need to cumulate the offsetLeft of elements in the
containment hierarchy of the image and then substract from the
evt.pageX/Y because there is no other way to do this in Mozilla.

DU

[DU]

Re: Capturing client-side image coordinates

Tony Gahlinger wrote:
[color=blue]
> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
> to do some client-side image processing. I want to capture the sequence of
> coordinates a user clicks on in xxx.jpg in the following html
>
> <a href="#"><IMG SRC="xxx.jpg" ISMAP></a>
>
> and save these to a file for later handling. The coordinates appear on
> the bottom left of the window as I move the mouse, so I know they're
> being passed around somehow, but I haven't figured out how to 'catch'
> them. (My apologies if this is a frequent Q. but a web search has led
> to an answer). Help much appreciated.
>
> --Tony[/color]


You first need to set an event listener for the image, like this:

function init()
{
if(document.add EventListener)
{
document.getEle mentById("idIma geToMonitor").a ddEventListener ("mousemove" ,
TrackCoordinate sInImage, false);
}
else if(window.event && document.getEle mentById)
{
document.getEle mentById("idIma geToMonitor").o nmousemove =
TrackCoordinate sInImage;
};
}

function TrackCoordinate sInImage(evt)
{
var Coordinate_X_In Image, Coordinate_Y_In Image;
Coordinate_X_In Image = Coordinate_Y_In Image = 0;
if(window.event && !window.opera && typeof event.offsetX == "number")
/* MSIE 5+ */
{
var Coordinate_X_In Image = event.offsetX;
var Coordinate_Y_In Image = event.offsetY;
}
else if(document.add EventListener && evt && typeof evt.pageX == "number")
/* Mozilla-based browsers */
{
var Element = evt.target;
var CalculatedTotal OffsetLeft, CalculatedTotal OffsetTop;
CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
while (Element.offset Parent)
{
CalculatedTotal OffsetLeft += Element.offsetL eft ;
CalculatedTotal OffsetTop += Element.offsetT op ;
Element = Element.offsetP arent ;
};
Coordinate_X_In Image = evt.pageX - CalculatedTotal OffsetLeft ;
Coordinate_Y_In Image = evt.pageY - CalculatedTotal OffsetTop ;
};
}

In your html:

<body onload="init(); " ...>

I have pages which uses+explains this code, also for Opera 6.x and Opera
7.x.

DU

[mscir]

Re: Capturing client-side image coordinates

DU wrote:
<snip>

I tried your code, it looks a lot cleaner than the approach I posted,
and it works great in my (Win98 SE) IE6, but not in my Netscape 7.1 or
Firefox 0.8. Here's what I did:

function init(){
if(document.add EventListener) {
document.getEle mentById("idIma geToMonitor").a ddEventListener ("mousemove" ,
TrackCoordinate sInImage, false);
} else if(window.event && document.getEle mentById) {
document.getEle mentById("idIma geToMonitor").o nmousemove =
TrackCoordinate sInImage;
}
}

function TrackCoordinate sInImage(evt){
var Coordinate_X_In Image;
var Coordinate_Y_In Image;
Coordinate_X_In Image = Coordinate_Y_In Image = 0;
if(window.event && !window.opera && typeof event.offsetX == "number") {
// IE 5+
var Coordinate_X_In Image = event.offsetX;
var Coordinate_Y_In Image = event.offsetY;
} else if(document.add EventListener && evt && typeof evt.pageX ==
"number"){
// Mozilla-based browsers
var Element = evt.target;
var CalculatedTotal OffsetLeft, CalculatedTotal OffsetTop;
CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
CalculatedTotal OffsetTop += Element.offsetT op ;
Element = Element.offsetP arent ;
}
Coordinate_X_In Image = evt.pageX - CalculatedTotal OffsetLeft ;
Coordinate_Y_In Image = evt.pageY - CalculatedTotal OffsetTop ;
}
document.getEle mentById('div1' ).innerText = "X:
"+Coordinate_X_ InImage+" Y: "+Coordinate_Y_ InImage;
}
[color=blue]
> I have pages which uses+explains this code, also for Opera 6.x and Opera 7.x.
> DU[/color]

Would you post the URL with code explanations so I can read up on this?

Thanks,
Mike

[DU]

Re: Capturing client-side image coordinates

mscir wrote:
[color=blue]
> DU wrote:
> <snip>
>
> I tried your code, it looks a lot cleaner than the approach I posted,
> and it works great in my (Win98 SE) IE6, but not in my Netscape 7.1 or
> Firefox 0.8.[/color]

innerText is not a W3C DOM 2 attribute nor a DOM 2 CharacterData
attribute. nodeValue though is and it is supported by MSIE 6!

Here's what I did:[color=blue]
>
> function init(){
> if(document.add EventListener) {
> document.getEle mentById("idIma geToMonitor").a ddEventListener ("mousemove" ,
> TrackCoordinate sInImage, false);
> } else if(window.event && document.getEle mentById) {
> document.getEle mentById("idIma geToMonitor").o nmousemove =
> TrackCoordinate sInImage;
> }
> }
>
> function TrackCoordinate sInImage(evt){
> var Coordinate_X_In Image;
> var Coordinate_Y_In Image;
> Coordinate_X_In Image = Coordinate_Y_In Image = 0;
> if(window.event && !window.opera && typeof event.offsetX == "number") {
> // IE 5+
> var Coordinate_X_In Image = event.offsetX;
> var Coordinate_Y_In Image = event.offsetY;
> } else if(document.add EventListener && evt && typeof evt.pageX ==
> "number"){
> // Mozilla-based browsers
> var Element = evt.target;
> var CalculatedTotal OffsetLeft, CalculatedTotal OffsetTop;
> CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
> while (Element.offset Parent) {
> CalculatedTotal OffsetLeft += Element.offsetL eft ;
> CalculatedTotal OffsetTop += Element.offsetT op ;
> Element = Element.offsetP arent ;
> }
> Coordinate_X_In Image = evt.pageX - CalculatedTotal OffsetLeft ;
> Coordinate_Y_In Image = evt.pageY - CalculatedTotal OffsetTop ;
> }
> document.getEle mentById('div1' ).innerText = "X:
> "+Coordinate_X_ InImage+" Y: "+Coordinate_Y_ InImage;[/color]


Change that above line to this:

if(document.get ElementById('di v1').childNodes[0] &&
document.getEle mentById('div1' ).childNodes[0].nodeType == 3)
{
document.getEle mentById('div1' ).childNodes[0].nodeValue = "X:
" + Coordinate_X_In Image + " Y: " + Coordinate_Y_In Image;
}

and make sure that div1 is without blank spaces (or is truly the first
text node), like this:
<div id="div1">&nbsp ;</div>

and this should work without a problem on all W3C DOM 2 CharacterData
conforming agent (that includes MSIE 6).

Demos:
Performance comparison between innerHTML attribute and DOM's nodeValue
when modifying the text data of a node of type TEXT_NODE

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/innerHTMLvsNodeValue.html

Interactive DOM level 2 CharacterData Interface attributes and methods
tests:

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DOM2CharacterData.html

[color=blue]
> }
>[color=green]
>> I have pages which uses+explains this code, also for Opera 6.x and
>> Opera 7.x.
>> DU[/color]
>
>
> Would you post the URL with code explanations so I can read up on this?
>
> Thanks,
> Mike
>[/color]

Here's a few:

(use MSIE 6 for this link)

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DUWindowsMSIE6.html

(use a Mozilla-based browser for this link)

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DUWindowsNS6.html#windowInnerWidthHeight

In the code of that page, I commented the part like this in function
MovesInNS6(evt)

/*
var elem = evt.target ;
var CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
while (elem.offsetPar ent)
{
CalculatedTotal OffsetLeft += elem.offsetLeft ;
CalculatedTotal OffsetTop += elem.offsetTop;
elem = elem.offsetPare nt;
}
*/

and I explained it around the area of the anchor #windowInnerWid thHeight

(use Opera 7 for this link)

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DUWindowsO7.html

(use Opera 6 for this link)

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DUWindowsO6.html

(use Opera 7 for this link)

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/Opera7Bugs/Opera7Bugs.html

and go+click item #11- event.offsetX and event.offsetY coordinate
values... for the demo:

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/Opera7Bugs/Opera7BugOffsetXY.html

DU

[mscir]

Re: Capturing client-side image coordinates

DU wrote:
[color=blue]
> mscir wrote:[color=green]
>> DU wrote:
>> <snip>
>> I tried your code, it looks a lot cleaner than the approach I posted,
>> and it works great in my (Win98 SE) IE6, but not in my Netscape 7.1 or
>> Firefox 0.8.[/color][/color]
<snip>
[color=blue]
> innerText is not a W3C DOM 2 attribute nor a DOM 2 CharacterData
> attribute. nodeValue though is and it is supported by MSIE 6![/color]

Apologies, your code works great, thanks for pointing out my mistake.
Thanks for the links too,
Mike

[Tony Gahlinger]

Re: Capturing client-side image coordinates

mscir wrote:[color=blue]
> DU wrote:
> <snip>
>
> I tried your code, it looks a lot cleaner than the approach I posted,
> and it works great in my (Win98 SE) IE6, but not in my Netscape 7.1 or
> Firefox 0.8. Here's what I did:
>
> <snip>
>
> Would you post the URL with code explanation so I can read up on this?
>
> Thanks,
> Mike[/color]

Hmm .. you guys are leaving me in the dust. Do I replace mscir's first code set
entirely with DU's, or do I still need pieces of it? In particular, what would
come after DU's '...' below:
[color=blue]
> In your html:
>
> <body onload="init(); " ...>[/color]

Do I still need mscir's storepoint or showarr functions?

I'd also be much interested in DU's code/explanations. Appreciate both your
efforts. Thanks.

--Tony

[mscir]

Re: Capturing client-side image coordinates

Tony Gahlinger wrote:[color=blue]
> mscir wrote:[color=green]
>> DU wrote:[/color][/color]
<snip>[color=blue]
> Hmm .. you guys are leaving me in the dust. Do I replace mscir's first
> code set entirely with DU's, or do I still need pieces of it? In particular, what
> would come after DU's '...'[/color]
<snip>

Here's one way to use his code, but you still have the problem of
storing the data in a file. Will the web page you want to save the file
from be loaded from a local hard drive, network, or a web site?

Mike

//global variables
var Coordinate_X_In Image;
var Coordinate_Y_In Image;

function init(){
if(document.add EventListener) {
document.getEle mentById("idIma geToMonitor").a ddEventListener ("mousemove" ,
TrackCoordinate sInImage, false);
} else if(window.event && document.getEle mentById) {
document.getEle mentById("idIma geToMonitor").o nmousemove =
TrackCoordinate sInImage;
}
}

function TrackCoordinate sInImage(evt){
Coordinate_X_In Image = Coordinate_Y_In Image = 0;
if(window.event && !window.opera && typeof event.offsetX == "number") {
// IE 5+
Coordinate_X_In Image = event.offsetX;
Coordinate_Y_In Image = event.offsetY;
} else if(document.add EventListener && evt && typeof evt.pageX ==
"number"){
// Mozilla-based browsers
var Element = evt.target;
var CalculatedTotal OffsetLeft, CalculatedTotal OffsetTop;
CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
CalculatedTotal OffsetTop += Element.offsetT op ;
Element = Element.offsetP arent ;
}
Coordinate_X_In Image = evt.pageX - CalculatedTotal OffsetLeft ;
Coordinate_Y_In Image = evt.pageY - CalculatedTotal OffsetTop ;
}
document.getEle mentById('div1' ).innerHTML = "X:
"+Coordinate_X_ InImage+" Y: "+Coordinate_Y_ InImage;
}

// array to store mouse click coordinates
var coords=new Array();

function storepoint(x,y) {
//uncomment the next line to see each image click's coordinates
//alert(x+', '+y);
coords[coords.length]=[x,y];
}

function showarr(){
var s1='';
for (var i=0; i<coords.length ; i++)
s1+='\n'+coords[i][0]+', '+coords[i][1];
alert(s1);
}

<body onload="init()" bgcolor="#00000 0">

<img name="idImageTo Monitor" id="idImageToMo nitor" src="logo.gif"
width="543" height="113" onmousedown="st orepoint(Coordi nate_X_InImage,
Coordinate_Y_In Image)">

<input type="button" value="Show Contents of Array" onclick="showar r()">

[Tony Gahlinger]

Re: Capturing client-side image coordinates

mscir wrote:[color=blue]
> Tony Gahlinger wrote:
>[color=green]
>> mscir wrote:[color=darkred]
>>> DU wrote:[/color][/color]
> <snip>
>[color=green]
>> Hmm .. you guys are leaving me in the dust. Do I replace mscir's first
>> code set entirely with DU's, or do I still need pieces of it? In
>> particular, what would come after DU's '...'[/color]
> <snip>
>
> Here's one way to use his code, but you still have the problem of
> storing the data in a file. Will the web page you want to save the file
> from be loaded from a local hard drive, network, or a web site?
>
> Mike
> <snip>[/color]

Cool! That works great.

Ultimately, the web page will be loaded from a web site, but for testing,
the coordinates are needed by a local C program, so I thought I'd just
dump them to a file.

Thanks a lot for your help.

--Tony

[DU]

Re: Capturing client-side image coordinates

mscir wrote:[color=blue]
> Tony Gahlinger wrote:
>[color=green]
>> mscir wrote:
>>[color=darkred]
>>> DU wrote:[/color][/color]
>
> <snip>
>[color=green]
>> Hmm .. you guys are leaving me in the dust. Do I replace mscir's first
>> code set entirely with DU's, or do I still need pieces of it? In
>> particular, what would come after DU's '...'[/color]
>
> <snip>
>
> Here's one way to use his code, but you still have the problem of
> storing the data in a file. Will the web page you want to save the file
> from be loaded from a local hard drive, network, or a web site?
>
> Mike
>
> //global variables
> var Coordinate_X_In Image;
> var Coordinate_Y_In Image;
>
> function init(){
> if(document.add EventListener) {
> document.getEle mentById("idIma geToMonitor").a ddEventListener ("mousemove" ,
> TrackCoordinate sInImage, false);
> } else if(window.event && document.getEle mentById) {
> document.getEle mentById("idIma geToMonitor").o nmousemove =
> TrackCoordinate sInImage;
> }
> }
>
> function TrackCoordinate sInImage(evt){
> Coordinate_X_In Image = Coordinate_Y_In Image = 0;
> if(window.event && !window.opera && typeof event.offsetX == "number") {
> // IE 5+
> Coordinate_X_In Image = event.offsetX;
> Coordinate_Y_In Image = event.offsetY;
> } else if(document.add EventListener && evt && typeof evt.pageX ==
> "number"){
> // Mozilla-based browsers
> var Element = evt.target;
> var CalculatedTotal OffsetLeft, CalculatedTotal OffsetTop;
> CalculatedTotal OffsetLeft = CalculatedTotal OffsetTop = 0;
> while (Element.offset Parent) {
> CalculatedTotal OffsetLeft += Element.offsetL eft ;
> CalculatedTotal OffsetTop += Element.offsetT op ;
> Element = Element.offsetP arent ;
> }
> Coordinate_X_In Image = evt.pageX - CalculatedTotal OffsetLeft ;
> Coordinate_Y_In Image = evt.pageY - CalculatedTotal OffsetTop ;
> }
> document.getEle mentById('div1' ).innerHTML = "X:
> "+Coordinate_X_ InImage+" Y: "+Coordinate_Y_ InImage;[/color]

If we knew how Tony's HTML code is, then I would suggest to use input
type="text" for these coordinate values. The problem with Mozilla-based
browsers is that you need to do quite a lot of calculations for
determining the offsetTop and offsetLeft values within the containment
hierarchy and since this is a mousemove event, then there is some real
chances of making users with modest system resources crash because of
this. That's why I commented out this code in the NS6.html page. But no
problem like that with Opera 7 and MSIE 6 pages since offsetX and
offsetY can be accessed directly.
Note that I personally don't like innerHTML when entirely W3C compliant
alternatives are available... and in fact more performant too.
[color=blue]
> }
>
> // array to store mouse click coordinates
> var coords=new Array();
>
> function storepoint(x,y) {
> //uncomment the next line to see each image click's coordinates
> //alert(x+', '+y);
> coords[coords.length]=[x,y];
> }
>
> function showarr(){
> var s1='';
> for (var i=0; i<coords.length ; i++)
> s1+='\n'+coords[i][0]+', '+coords[i][1];
> alert(s1);
> }
>
> <body onload="init()" bgcolor="#00000 0">
>
> <img name="idImageTo Monitor" id="idImageToMo nitor" src="logo.gif"
> width="543" height="113" onmousedown="st orepoint(Coordi nate_X_InImage,
> Coordinate_Y_In Image)">
>[/color]

There is a significant difference (performance and stability
consequences) if the code should work on a mousedown instead of a
mousemove event. This is important to understand. Right now, poorly
coded and non-optimized DHTML mouse trail effects will make NS 6.x, NS
7.x and Mozilla-based browser users more prone to application crashes.

DU
[color=blue]
> <input type="button" value="Show Contents of Array" onclick="showar r()">
>[/color]

[mscir]

Re: Capturing client-side image coordinates

DU wrote:[color=blue][color=green]
>> <snip>
>> document.getEle mentById('div1' ).innerHTML = "X:
>> "+Coordinate_X_ InImage+" Y: "+Coordinate_Y_ InImage;[/color]
>
> If we knew how Tony's HTML code is, then I would suggest to use input
> type="text" for these coordinate values. The problem with Mozilla-based
> browsers is that you need to do quite a lot of calculations for
> determining the offsetTop and offsetLeft values within the containment
> hierarchy and since this is a mousemove event, then there is some real
> chances of making users with modest system resources crash because of
> this. That's why I commented out this code in the NS6.html page. But no
> problem like that with Opera 7 and MSIE 6 pages since offsetX and
> offsetY can be accessed directly.
> Note that I personally don't like innerHTML when entirely W3C compliant
> alternatives are available... and in fact more performant too.[/color]

Are you saying that you have a more efficient means of tracking the
mouse position over an image? If so please post it.

<snip>[color=blue]
> There is a significant difference (performance and stability
> consequences) if the code should work on a mousedown instead of a
> mousemove event. This is important to understand. Right now, poorly
> coded and non-optimized DHTML mouse trail effects will make NS 6.x, NS
> 7.x and Mozilla-based browser users more prone to application crashes.[/color]

The OP said (in the 1st post),

"I want to capture the sequence of coordinates a user clicks on in
xxx.jpg..."

If I understand him correctly, he wants to record where the user clicks
on the image, not every position the mouse moved over the image. I guess
I'm not getting your point. Are you saying you know of a more efficient
way to approach this problem?

Mike

[mscir]

Re: Capturing client-side image coordinates

Tony Gahlinger wrote:
[color=blue]
> I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
> to do some client-side image processing. I want to capture the sequence of
> coordinates a user clicks on in xxx.jpg in the following html
>
> <a href="#"><IMG SRC="xxx.jpg" ISMAP></a>
>
> and save these to a file for later handling. The coordinates appear on
> the bottom left of the window as I move the mouse, so I know they're
> being passed around somehow, but I haven't figured out how to 'catch'
> them. (My apologies if this is a frequent Q. but a web search has led
> to an answer). Help much appreciated.
>
> --Tony[/color]

I just used this to read and write a local text file with Netscape 7.1.
The browser does popup a window asking permission for each operation,
but it also lets me tell it to remember each decision if I don't want to
see the dialog again.

Mike
---------------------

Captain's Mozilla XUL LOG - read local files and write local files:

Here is a nice example of Mozilla's XUL including reading and writing
from/to local files.

http://www.captain.at/programming/xul/