x,y coordinates from an <input type='image'>

Discussion in 'Javascript' started by jackiepatti@gmail.com, Aug 24, 2006.

  1. Guest

    QUESTION:
    I have a web page containing a form that contains an image instead of a
    submit button, e.g.
    <form name='myform' action='get' method='otherpage.asp'>
    <input type='image' src='picture.gif' name='myimage' id='myimage'>
    </form>

    When forms with image types are submitted, the value is not returned;
    instead, when the form is submitted, the XY coordinates of the where
    the user clicked on the image are sent. For example, if the user
    clicked on the pixel located at 100, 150, a querystring of this form is
    sent:
    ?myimage.x=100&myimage.y=150

    Does anyone know how I can access these variables via JavaScript before
    the form is submitted? I have tried everything I can think of and
    Googled like crazy and have run out of ideas. I have even tried
    submitting the form, extracting the variables, and then cancelling the
    submission, but... it seems I just can't get there from here. The form
    field does not seem to have any properties whatsoever.

    I am testing in IE 6.0 and Mozilla 1.4 on W2K, but am hoping for a
    solution as browser-compatible as possible; at a minimum I need IE 5
    and up, Mozilla, Firefox and Safari.

    CONTEXT:
    I am building an art gallery.

    This particular page contains an image of a color wheel showing the RGB
    color space at brightness = 100%. The user click on the color wheel to
    return an x,y value pair, from which I calculate the RGB value in
    hexadecimal. I write the RGB value to a hidden form field in a second
    form and then write a little DIV with a background set to the chosen
    color to show the user.

    The user can then change the RGB value by editing another form field
    (brightness), from which I recalculate the RGB value, again writing it
    to my hidden form field in the second form and as the background to the
    little DIV.

    Once the user has finished choosing their color via the color wheel and
    brightness field, they submit the second form to my site where I
    extract the hidden form field to search my database for art containing
    that color.

    The bit I cannot get to work is that I can't seem to get the x,y value
    pair from the <input type=image> field in the first form on the
    client-side.

    I cannot implement this via a client-side image map as there are over
    40000 individual pixels that would need definition in a <MAP> tag and I
    have to complete this project within this lifetime. ;) So I prefer to
    calculate from the x,y coordinates.

    I prefer not to implement it via a server-side image map as the user
    may make changes many times before choosing to search and this would
    slow the application down a great deal if they had to submit repeatedly
    just so I could get the x,y coordinates from a querystring.

    I think it may simply not be possible to access the x,y coordinates
    from and an <input type='image'> on the client-side. Does anyone have
    any other ideas about how I can access the coordinates of the image at
    the point where the user clicked?
    , Aug 24, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > QUESTION:
    > I have a web page containing a form that contains an image instead of a
    > submit button, e.g.
    > <form name='myform' action='get' method='otherpage.asp'>
    > <input type='image' src='picture.gif' name='myimage' id='myimage'>
    > </form>
    >
    > When forms with image types are submitted, the value is not returned;
    > instead, when the form is submitted, the XY coordinates of the where
    > the user clicked on the image are sent. For example, if the user
    > clicked on the pixel located at 100, 150, a querystring of this form is
    > sent:
    > ?myimage.x=100&myimage.y=150
    >
    > Does anyone know how I can access these variables via JavaScript before
    > the form is submitted?


    Don't use an input type=image. :)


    > I have tried everything I can think of and
    > Googled like crazy and have run out of ideas. I have even tried
    > submitting the form, extracting the variables, and then cancelling the
    > submission, but... it seems I just can't get there from here. The form
    > field does not seem to have any properties whatsoever.


    Use a real image element and use the properties of the event object
    when it is clicked on to get the click's co-ordinates. Subtract the
    co-ordinates of the top left corner of the image to get relative
    co-ordinates to calculate the colour and put them in your form. Let
    the user post the form with a normal submit button.


    > I am testing in IE 6.0 and Mozilla 1.4 on W2K, but am hoping for a
    > solution as browser-compatible as possible; at a minimum I need IE 5
    > and up, Mozilla, Firefox and Safari.


    The sample below has been tested in IE 6 and Firefox 1.0.5. It should
    also work in other modern browsers, please test. The example just
    writes the image click co-ordinates to a text input, you of course will
    convert them to a colour.


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <title>Image click co-ords</title>

    <script type="text/javascript">

    function setClick(e, id)
    {
    var el = e.target || e.srcElement;

    // Get mouse click co-ords
    var ePos = {x:0, y:0};
    if ('number' == typeof e.pageX){
    ePos.x = e.pageX;
    ePos.y = e.pageY;
    } else if ('number' == typeof e.clientX){
    ePos.x = e.clientX + document.body.scrollLeft
    + document.documentElement.scrollLeft;
    ePos.y = e.clientY + document.body.scrollTop
    + document.documentElement.scrollTop;
    }

    // Get image top left co-ords
    var elPos = {x:0, y:0};
    if (el.offsetParent) {
    elPos.x = el.offsetLeft;
    elPos.y = el.offsetTop;
    while (el = el.offsetParent) {
    elPos.x += el.offsetLeft;
    elPos.y += el.offsetTop;
    }
    }

    // Write relative position of click to form controls
    document.getElementById(id).value =
    (ePos.x - elPos.x) + ', ' + (ePos.y - elPos.y);
    }
    </script>

    <form action="">
    <table>
    <tr>
    <th>Colour</th><th>Brighness</th>
    </tr><tr>
    <td><img src="a.gif" width="100" height="100"
    style="border: 1px solid red;"
    onclick="setClick(event, 'colourValue');"></td>
    <td><img src="a.gif" width="100" height="100"
    style="border: 1px solid blue;"
    onclick="setClick(event, 'brightValue');"></td>
    </tr><tr>
    <td><input type="text" id="colourValue" size="5"></td>
    <td><input type="text" id="brightValue" size="5"></td>
    </tr><tr>
    <td><input type="reset"></td>
    <td><input type="submit"></td>
    </tr>
    </table>
    </form>


    --
    Rob
    RobG, Aug 24, 2006
    #2
    1. Advertising

  3. Guest

    RobG wrote:
    > The example just writes the image click co-ordinates to a text input,
    > you of course will convert them to a colour.


    No, I will convert them to a color. My husband would convert them to a
    colour though. ;)

    I had just begun working on something sort of similar to your idea...
    but I put the image in an absolutely positioned DIV so I knew what my
    offsets are. But that isn't nearly as elegant a solution as your
    solution since I hard-coded my offsets in the script, so I shall use
    your idea as I like it better than mine.

    The different meanings of client.X and client.Y across browsers is
    frustrating. There's good info on this topic here:
    http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html


    I *know* the browser has the information I want given that it can pass
    it with either an <input type="image"> or an <img ismap> - it *has* the
    information, it's just making me jump through hoops to get it.

    Thanks for your help, Rob. I've been stuck trying to figure this out
    for hours and hours now. It's nice to have help when pulling an
    all-nighter.
    , Aug 24, 2006
    #3
  4. Guest

    wrote:
    > RobG wrote:
    > > The example just writes the image click co-ordinates to a text input,
    > > you of course will convert them to a colour.

    >
    > No, I will convert them to a color. My husband would convert them to a
    > colour though. ;)


    You say tomato, I say tomato...


    [...]
    > The different meanings of client.X and client.Y across browsers is
    > frustrating. There's good info on this topic here:
    > http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html


    That article was written by Peter-Paul Koch in 2002. The position
    stuff in the script I posted came (mostly) from his web site, which I
    think is much more up to date - particularly in regard to browser
    sniffing.

    <URL: http://www.quirksmode.org/ >

    Element position:
    <URL: http://www.quirksmode.org/js/findpos.html >

    Click position:
    <URL: http://www.quirksmode.org/js/events_properties.html >


    --
    Rob
    , Aug 24, 2006
    #4
    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. Janani via DotNetMonster.com

    Getting Jpeg Image Coordinates

    Janani via DotNetMonster.com, Jan 20, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    3,636
    =?Utf-8?B?U2NvdHQgU2ltb25z?=
    Jan 20, 2005
  2. Suresh  Kumar
    Replies:
    0
    Views:
    589
    Suresh Kumar
    Jul 3, 2003
  3. Suresh  Kumar
    Replies:
    0
    Views:
    515
    Suresh Kumar
    Jul 4, 2003
  4. Roberto
    Replies:
    3
    Views:
    308
  5. Replies:
    3
    Views:
    168
Loading...

Share This Page