selection rectangle

Discussion in 'Javascript' started by thom, Apr 22, 2006.

  1. thom

    thom Guest

    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>
     
    thom, Apr 22, 2006
    #1
    1. Advertising

  2. thom

    ASM Guest

    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.


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 22, 2006
    #2
    1. Advertising

  3. thom

    thom Guest

    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.


    ASM wrote :

    > 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.
     
    thom, Apr 22, 2006
    #3
  4. thom

    ASM Guest

    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)

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 22, 2006
    #4
  5. thom

    thom Guest

    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 :D 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 o_O! 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, Apr 22, 2006
    #5
  6. thom

    thom Guest

    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.
     
    thom, Apr 23, 2006
    #6
  7. thom

    ASM Guest

    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)

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 23, 2006
    #7
  8. thom

    ASM Guest

    thom a écrit :
    > 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.


    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


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 23, 2006
    #8
  9. thom

    thom Guest

    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 :D

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


    you lucky!
    've nice holidays ;)

    thom.
     
    thom, Apr 26, 2006
    #9
  10. thom

    thom Guest

    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.
     
    thom, May 8, 2006
    #10
  11. thom

    Evertjan. Guest

    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/ >

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., May 8, 2006
    #11
  12. thom

    thom Guest

    Evertjan. a écrit :
    > 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/ >
    >

    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.
     
    thom, May 8, 2006
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tyrant Mikey
    Replies:
    10
    Views:
    5,528
    Tyrant Mikey
    Feb 7, 2005
  2. Simon Niederberger
    Replies:
    2
    Views:
    16,698
    Christian Kaufhold
    Jan 7, 2005
  3. Andrew Crowe
    Replies:
    1
    Views:
    4,522
    Andrew Crowe
    Sep 13, 2004
  4. curiousity

    HOWTO autopost the selection list upon selection

    curiousity, Nov 21, 2003, in forum: ASP .Net Mobile
    Replies:
    0
    Views:
    284
    curiousity
    Nov 21, 2003
  5. Loebb
    Replies:
    0
    Views:
    215
    Loebb
    Feb 23, 2004
Loading...

Share This Page