Problem getting image coordinates with offsetX & offsetY

[Cinquini]

Hi

I have a html page where a image is displayed. I'd like to calculate
the offset when a user clicks and drags the mouse on it. I have the
following code below, but it only shows me the coordinates when I
perform a click event.

When I click down the mouse, drag a little and release the button,
nothing happens. Here's the code:

function coord_down(e)
{
x1 = e.offsetX;
y1 = e.offsetY;
//alert('X1,Y1 = ' + x1 + ',' + y1);
}
function coord_move(e)
{
x2 = e.offsetX;
y2 = e.offsetY;
}
function coord_up()
{
alert('X1,Y1 = ' + x1 + ',' + y1 + ' X2,Y2 = ' + x2 + ',' + y2);
}

HTML Code
<img id="Lead2" name="Lead2" style="LEFT:0px; TOP:0px;"
height="242" width="339" align="baseline" border="1"
onMouseDown="coord_down(event);" onMouseMove="coord_move(event);"
onMouseUp="coord_up();" Src="some_image.jpg>
</img>


I only can get coordinates in coord_down() when I uncomment the alert
(...) line. If i dont, I get the same coordidates for the X1,X2 and
Y1,Y2 if a perform a click withou drag on the image.

Can someone help me?

 

[GTalbot]

Hi

I have a html page

Cinquini,

Please always provide an URL for your HTML page so that we can examine
all of the relevant code. Here, we don't know if there is a stylesheet
applying to the image, if the HTML document uses a doctype declaration
and if so which one, if the whole webpage passes markup validation,
css validation, has errors in css, markup, javascript, etc
etc,etcetc..

where a image is displayed. I'd like to calculate

the offset when a user clicks and drags the mouse on it. I have the
following code below, but it only shows me the coordinates when I
perform a click event.

Then, you should use a mouseover event handler.

When I click down the mouse, drag a little and release the button,
nothing happens. Here's the code:

function coord_down(e)
{
x1 = e.offsetX;
y1 = e.offsetY;
//alert('X1,Y1 = ' + x1 + ',' + y1);}

I strongly recommend to stay away from alerts, for many reasons which
would take long to explain. To get the x and y coordinates, it's
better to use 2 input type="text" controls to output x and y
coordinates.

function coord_move(e)
{
x2 = e.offsetX;
y2 = e.offsetY;}

function coord_up()
{
alert('X1,Y1 = ' + x1 + ',' + y1 + ' X2,Y2 = ' + x2 + ',' + y2);

Again, I recommend to stay away from alerts and to only use input to
see the x and y coordinates.

}

HTML Code
<img id="Lead2" name="Lead2" style="LEFT:0px; TOP:0px;"
height="242" width="339" align="baseline" border="1"
onMouseDown="coord_down(event);" onMouseMove="coord_move(event);"
onMouseUp="coord_up();" Src="some_image.jpg>
</img>

Src="some_image.jpg
is not the same as
Src="some_image.jpg"
So, here you have a serious validation markup error.

</img> is not needed, not correct unless you're using XHTML...

Also, your Lead2 img is not declared as using position absolute: so,
either you declared this somewhere else in your code or otherwise you
can not drag it. If you had provided an url, ...

align="baseline" border="1"
are deprecated attributes: you should use CSS and declare a strict DTD
for your doctype declaration.

The way you coded coord_down(event), coord_move(event) and coord_up()
can only have a chance to work in IE browsers, and not other web-
standards-compliant browsers.

I only can get coordinates in coord_down() when I uncomment the alert
(...) line. If i dont, I get the same coordidates for the X1,X2 and
Y1,Y2 if a perform a click withou drag on the image.

Can someone help me?

First you really should first start with the following:
make sure you declare a doctype declaration, preferably one which
declares a strict DTD, make sure you pass markup validation and CSS
validation and then provide an URL.

Specific urls to achieve all this:
https://developer.mozilla.org/en/Us...Making_your_page_using_web_standards_-_how_to

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Also, checking the error console in Firefox 3, Opera 9+, Safari 4 for
javascript related errors.

Interactive demo on event.offsetX/Y properties
http://www.gtalbot.org/DHTMLSection/PositioningEventOffsetXY.html

Note that there are bugs in IE 8 and Opera 9+ regarding event offsetX
and offsetY... but we're far from this here. First, make sure your
webpage is clear from errors and web-standards-compliant..

regards, Gérard