selection rectangle

[thom]

Hello everybody,

Here is a little javascript that gives me the mouse's
x and y coordinates.

Now, i'd like to be able to make selection(s) rectangle(s)
on a given image with it.
And then, save the selection's specs.

For what i've seen by now: the major problem is the DOM compliant,
and browsers compatibility.

Could you please help/point me out doing it?

thanks in advance,
Thom.

//-------------------------
//The Code:
//-------------------------
<script type="text/javascript" language="javascript">
<!--
function twPositionRelative(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
}
else if (document.getElementById) {
nOffsetX = evt.pageX - document.getElementById("monImage").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monImage").offsetTop;
}
document.getElementById("hTrace").innerHTML = "X : "+nOffsetX+" ; Y :
"+nOffsetY;
}
}

function twInit() {
var oImage = document.getElementById("monImage")
if (oImage) {
oImage.style.cursor = "crosshair"
oImage.onmousemove = twPositionRelative
}
}
-->
</script>

 

[ASM]

thom a écrit :

Hello everybody,

Here is a little javascript that gives me the mouse's
x and y coordinates.

have a look here :
http://perso.wanadoo.fr/stephane.moriaux/truc/coord_carte.htm
to see how I propose to catch coordinates on an image

Preferably to do not use detection with document.all
because not only IE understand that

To get your selection, easiest way would be to use two successive clicks
1st angle, then oposite angle.

as I do here :
http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/
(caution : not finished don't click on green button)
(page in french, and wide screen needed)

You may too use a combination of keys to simulate the lasso ?

You could go here :
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
to see if there is something interresting about your deal.

 

[thom]

First merci beaucoup answering me so fast and so right!
the given links are the kind of things i'm wishing to do.
(http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)

i'm gonna try to let user make multiple selections

Preferably to do not use detection with document.all
because not only IE understand that

you're right, a similar script (based on the given one in my
first post) doesn't work properly in all browsers when
adding the selection rectangle funcs (especially Mac's safari
if i remember right).


Thom.

 

[ASM]

thom a écrit :

First merci beaucoup answering me so fast and so right!
the given links are the kind of things i'm wishing to do.
(http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)

i'm gonna try to let user make multiple selections
on the picture, then generate the corresponding map.

This example was basically to get several areas cooordinates
and was a little simplified to one area (in order to go to a new page
with this area taller re-sized (suite en devenir ...) )

Instead to begin a new fresh selection you just need :
- to validate the onwork selection
- to begin a new one while keeping the old one.

Validations could be stocked in an array.

a similar script (based on the given one in my
first post) doesn't work properly in all browsers when
adding the selection rectangle funcs (especially Mac's safari
if i remember right).

if it works on 1st point it would have to work with 2nd point.

I would do something like that :
- image to map
- a hidden div with border and transparent background-image
with a onclick function to select this div
- a lasso function similar that I have on given example
on 1st click : 1st point and stock in a variable
on 2nd click or double-click : 2nd point stocked
then :
- cloning hidden div above
- giving it correct size and place (from stock)
- giving it an id and visibility
- eventualy to give it a title or/and a link in accordance
- perhaps to stock all necessary in an array
- when clicking on this new div : function to re-arrange it ?
- a button to validate the complete map
to create html code of all this clones
(using a loop on collection of this clones
with result in a textarea to afterward copy its content)

 

[thom]

Hello,

my comments will be based on your code (suisse),
so you can better understand what i'm talking about,
and you know what you've done, i don't and
my try-outs are not fully working for the moment.

ASM wrote :

Instead to begin a new fresh selection you just need :
- to validate the onwork selection
- to begin a new one while keeping the old one.

Validations could be stocked in an array.

that's would be done in the termine() function ?

Validations could be stocked in an array.

im not so used with javascript, and have no clue
on how to save the "name=coordonnee" values
(the one you have used in the input form to show the points)
into a php array,in order to generate the map coordinates using
this array values.

- to validate the onwork selection
- to begin a new one while keeping the old one.

so keeping the selection is to save values in the array
and still showing up the selected rectangle(s) while making
another one.
Meaning if user has made 3 selections, at end, you
will see the 3 rectangle on your suisse map.
None of them being cleared with the raz() function or the termine().

how?

I would do something like that :
- image to map
- a hidden div with border and transparent background-image
with a onclick function to select this div
- a lasso function similar that I have on given example
on 1st click : 1st point and stock in a variable
on 2nd click or double-click : 2nd point stocked
then :
- cloning hidden div above
- giving it correct size and place (from stock)
- giving it an id and visibility
- eventualy to give it a title or/and a link in accordance
- perhaps to stock all necessary in an array
- when clicking on this new div : function to re-arrange it ?
- a button to validate the complete map
to create html code of all this clones
(using a loop on collection of this clones
with result in a textarea to afterward copy its content)

Wow ! amazing, sounds very good, but i don't think
i could make it work lol! That's my feeling for moment,
but who knows, someday maybe

Thanks for helping,
thom.

 

[thom]

thom wrotes :

im not so used with javascript, and have no clue
on how to save the "name=coordonnee" values
(the one you have used in the input form to show the points)
into a php array,in order to generate the map coordinates using
this array values.

in terminee() i modified a var which i gave the coordianates, like
this: points=" "+pos1x+" "+pos1y+" "+posx+" "+posy+" ";
then i wanted to take the value from points into php.

Is i possible using something like this?

<?php
echo "<script type=\"text/javascript\">alert(\"value from points var:
\"+points);</script>";
?>

instead of the popup, maybe i could affect the point value to a
php var like:

<?php
$coords = echo "<script type=\"text/javascript\">points;</script>";
?>


OK then i understood you were using C.value to do what i told
you with my variable
So the C.value would be used instead of my var points.


thom.

 

[ASM]

thom a écrit :

thom wrotes :
[...]

OK then i understood you were using C.value to do what i told
you with my variable
So the C.value would be used instead of my var points.

hi thom,

you'll find something more finished here
http://stephane.moriaux.perso.wanadoo.fr/truc/suisse/thom.htm

when all areas are fixed the push on green button
catch all areas and create html code (links width sizes and position)
all this html code comes in a textarea of a form

you'll put your php file url in this form's action
to get this area value

Sorry it was too difficult to explain step by step what you could do
with precedent example.

Sorry 2 : I'm on holiday this evening (10 days)

 

[ASM]

thom a écrit :

thom wrotes :

in terminee() i modified a var which i gave the coordianates, like
this: points=" "+pos1x+" "+pos1y+" "+posx+" "+posy+" ";
then i wanted to take the value from points into php.

preferably :
points="'"+pos1x+"','"+pos1y+"','"+posx+"','"+posy+'";
or :
points="'"+pos1x+"','"+pos1y+"';'"+posx+"','"+posy+"'";

Like that the text field C value will be an array
or an array of 2 arraies

Is i possible using something like this?

you confuse me with your php I sniped

on example all work by JavaScript

positions of 2 oposit points of selection are in the text field

all what you have to do is to put the right uri of your php file in the
action of this form to get this text field value
when you submit with green button

OK then i understood you were using C.value to do what i told
you with my variable
So the C.value would be used instead of my var points.

if C is the text field of form, I think yes

 

[thom]

Hi stephane,

ASM wrote :

you'll find something more finished here

Sorry it was too difficult to explain step by step what you could do
with precedent example.

Don't worry for that, it's very kind of you having posted a new
source code for me... it's now time for me to study it

Sorry 2 : I'm on holiday this evening (10 days)

you lucky!
've nice holidays

thom.

 

[thom]

Hello,
i hope u'll read this post today:
your code is running like a charm if on a single page,
but once you put it into a div, which you selected the style position,
the selection rectangle are not on the picture anymore, say i click one
point, the showing point is 100px left etc.. (doesn't match anymore).
I know it is css, but wow, can't find a solution!
Did you? or someone else?

thx, thom.

 

[Evertjan.]

thom wrote on 08 mei 2006 in comp.lang.javascript:

i hope u'll read this post today:
your code is running like a charm if on a single page,
but once you put it into a div, which you selected the style position,
the selection rectangle are not on the picture anymore, say i click one
point, the showing point is 100px left etc.. (doesn't match anymore).
I know it is css, but wow, can't find a solution!
Did you? or someone else?

To whom are you talking?
Wahat are you talking about?

Please always quote on usenet.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers.

<URL: http://www.safalra.com/special/googlegroupsreply/ >

 

[thom]

Evertjan. a écrit :

thom wrote on 08 mei 2006 in comp.lang.javascript:

To whom are you talking?
Wahat are you talking about?

Please always quote on usenet.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers.

<URL: http://www.safalra.com/special/googlegroupsreply/ >

sorry, i thought you were still seeing former posts..
i am talking about this:

http://stephane.moriaux.perso.wanadoo.fr/truc/suisse/thom.htm

problem comes when i put this everything into a div give it a place
on a webpage: the selection rectangle isn't synchronized, it doesn't
fit with the selection anymore.
it has to do with the "create selection" and the "lasso" functions...
and the x, y values.

thom.