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]

Tony Gahlinger wrote:

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.

^^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]

Tony Gahlinger wrote:

Tony Gahlinger wrote:

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

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]

mscir wrote:

Tony Gahlinger wrote:

Tony Gahlinger wrote:

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

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

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

--Tony

[DU]

mscir wrote:

Tony Gahlinger wrote:

Tony Gahlinger wrote:

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

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

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]

Tony Gahlinger wrote:

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

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]

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;
}

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

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

Thanks,
Mike

[DU]

mscir wrote:

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.
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:
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;

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/doctorunc...NodeValue.html

Interactive DOM level 2 CharacterData Interface attributes and methods
tests:
http://www10.brinkster.com/doctorunc...acterData.html
}

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

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

Thanks,
Mike

Here's a few:

(use MSIE 6 for this link)
http://www10.brinkster.com/doctorunc...dowsMSIE6.html
(use a Mozilla-based browser for this link)
http://www10.brinkster.com/doctorunc...nerWidthHeight
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/doctorunc...WindowsO7.html

(use Opera 6 for this link)
http://www10.brinkster.com/doctorunc...WindowsO6.html

(use Opera 7 for this link)
http://www10.brinkster.com/doctorunc...pera7Bugs.html
and go+click item #11- event.offsetX and event.offsetY coordinate
values... for the demo:
http://www10.brinkster.com/doctorunc...gOffsetXY.html

DU

[mscir]

DU wrote:

mscir wrote:

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.

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

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

[Tony Gahlinger]

mscir wrote:

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
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:
In your html:

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

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