Trapping click events in the Image control

Discussion in 'ASP .Net' started by Jeff Ptak, Aug 5, 2003.

  1. Jeff Ptak

    Jeff Ptak Guest

    Can anyone tell me how to trap mouse click events in the
    Image control?

    I am trying to implement an image zoom feature using
    JavaScript where the user could "draw" a zoom box (aka
    rubber band box) on the image and the image would zoom to
    the extents of the box.

    Anyone know how to accomplish this?

    Thanks!

    Jeff Ptak
    Jeff Ptak, Aug 5, 2003
    #1
    1. Advertising

  2. Hi Jeff,

    That sounds like an interesting challenge.

    If you can use IE only, there are drag events that you can grab and use. Here's
    a quickie demo:

    <form id="Form1" method="post" runat="server">
    <asp:image id="Image1" runat="server"
    imageurl="http://canada.gc.ca/images/rollingflag.jpg"></asp:image>
    <script for="Image1" event=ondragend>
    alert(window.event.offsetX );
    </script>
    </form>

    There's lots more here:

    http://msdn.microsoft.com/library/d...hor/dhtml/reference/dhtml_reference_entry.asp

    Ken


    "Jeff Ptak" <> wrote in message
    news:928c01c35b90$7ca8a070$...
    Can anyone tell me how to trap mouse click events in the
    Image control?

    I am trying to implement an image zoom feature using
    JavaScript where the user could "draw" a zoom box (aka
    rubber band box) on the image and the image would zoom to
    the extents of the box.

    Anyone know how to accomplish this?

    Thanks!

    Jeff Ptak
    Ken Cox [Microsoft MVP], Aug 6, 2003
    #2
    1. Advertising

  3. Natty,

    Can you share the VML code to draw rubber band box
    How did you draw the rubber band box
    Getting the coordinates is easy then dealing with it on the server is easy
    but I am not familiar with the VML Rubber Band Box

    Thank you for sharing

    J
    "Natty Gur" <> wrote in message
    news:eGe%...
    > Jeff Hi,
    >
    > we did it with GIS application, basicly we
    > use the mouse event to trap the mouse down and then mouse move. while
    > the mouse move we use VML to drow rubber band box. when the mouse up we
    > send the cordination of the VML object to the server to create new image
    > on the server and return it to the client.
    >
    >
    > Natty Gur, CTO
    > Dao2Com Ltd.
    > 34th Elkalay st. Raanana
    > Israel , 43000
    > Phone Numbers:
    > Office: +972-(0)9-7740261
    > Fax: +972-(0)9-7740261
    > Mobile: +972-(0)58-888377
    >
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!
    MS News \(MS LVP\), Aug 6, 2003
    #3
  4. Jeff Ptak

    Natty Gur Guest

    Hi,

    You welcome, here is the code that draw the rectangle. Its part of long
    js file. the complicate part is keeping the start and current mouse
    coordinates and interact with ArcIMS .

    function DrawRectangle(){

    if (event.button==rightButton && pointCount==0){
    return false;
    }

    if (event.button==leftButton && pointCount==0){
    //Left click mouse - create a new point in the polyline

    if (lastXX != get_x() || lastYY != get_y() ){ //This "IF"
    check if you do DOUBLCLICK" alert ('Same Point') };

    add_point(get_x(),get_y());

    lastXX = get_x();
    lastYY = get_y();

    }

    }

    if
    (arcims_poly!=null){document.all.arcims_draw.removeChild(arcims_poly);}
    arcims_poly=document.createElement("<v:polyline filled=\"False\"
    strokecolor=\"red\" strokeweight=\"2pt\" points=\"" +
    arrPoint.toString() +"\"></v:polyline>");
    document.all.arcims_draw.appendChild(arcims_poly);

    if (event.button==leftButton && pointCount==1){
    return false;
    }




    if (event.button==rightButton && pointCount == 1){
    lastXX = get_x();
    lastYY = get_y();
    showDynamicRectangle(lastXX, lastYY);
    // alert(arrCoord.toString() + " <>" + arrPoint.toString());
    pointCount = 0;
    return false;
    }

    pointCount++; //After the first point

    arrPoint[1]=new Array(2);
    arrPoint[2]=new Array(2);
    arrPoint[3]=new Array(2);
    arrPoint[4]=new Array(2);
    arrCoord[1]=new Array(2);
    arrCoord[2]=new Array(2);
    arrCoord[3]=new Array(2);
    arrCoord[4]=new Array(2);

    }



    Natty Gur, CTO
    Dao2Com Ltd.
    34th Elkalay st. Raanana
    Israel , 43000
    Phone Numbers:
    Office: +972-(0)9-7740261
    Fax: +972-(0)9-7740261
    Mobile: +972-(0)58-888377


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Natty Gur, Aug 6, 2003
    #4
  5. Thank you


    "Natty Gur" <> wrote in message
    news:%23qcdp5%...
    > Hi,
    >
    > You welcome, here is the code that draw the rectangle. Its part of long
    > js file. the complicate part is keeping the start and current mouse
    > coordinates and interact with ArcIMS .
    >
    > function DrawRectangle(){
    >
    > if (event.button==rightButton && pointCount==0){
    > return false;
    > }
    >
    > if (event.button==leftButton && pointCount==0){
    > //Left click mouse - create a new point in the polyline
    >
    > if (lastXX != get_x() || lastYY != get_y() ){ //This "IF"
    > check if you do DOUBLCLICK" alert ('Same Point') };
    >
    > add_point(get_x(),get_y());
    >
    > lastXX = get_x();
    > lastYY = get_y();
    >
    > }
    >
    > }
    >
    > if
    > (arcims_poly!=null){document.all.arcims_draw.removeChild(arcims_poly);}
    > arcims_poly=document.createElement("<v:polyline filled=\"False\"
    > strokecolor=\"red\" strokeweight=\"2pt\" points=\"" +
    > arrPoint.toString() +"\"></v:polyline>");
    > document.all.arcims_draw.appendChild(arcims_poly);
    >
    > if (event.button==leftButton && pointCount==1){
    > return false;
    > }
    >
    >
    >
    >
    > if (event.button==rightButton && pointCount == 1){
    > lastXX = get_x();
    > lastYY = get_y();
    > showDynamicRectangle(lastXX, lastYY);
    > // alert(arrCoord.toString() + " <>" + arrPoint.toString());
    > pointCount = 0;
    > return false;
    > }
    >
    > pointCount++; //After the first point
    >
    > arrPoint[1]=new Array(2);
    > arrPoint[2]=new Array(2);
    > arrPoint[3]=new Array(2);
    > arrPoint[4]=new Array(2);
    > arrCoord[1]=new Array(2);
    > arrCoord[2]=new Array(2);
    > arrCoord[3]=new Array(2);
    > arrCoord[4]=new Array(2);
    >
    > }
    >
    >
    >
    > Natty Gur, CTO
    > Dao2Com Ltd.
    > 34th Elkalay st. Raanana
    > Israel , 43000
    > Phone Numbers:
    > Office: +972-(0)9-7740261
    > Fax: +972-(0)9-7740261
    > Mobile: +972-(0)58-888377
    >
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!
    MS News \(MS LVP\), Aug 6, 2003
    #5
  6. Not sure why the code didn't make it in the other message. Maybe there's a
    filter to catch the tags?


    Hi Jeff,

    That sounds like an interesting challenge.

    If you can use IE only, there are drag events that you can grab and use. Here's
    a quickie demo:

    <form id="Form1" method="post" runat="server">
    <asp:image id="Image1" runat="server"
    imageurl="http://canada.gc.ca/images/rollingflag.jpg"></asp:image>
    <script for="Image1" event=ondragend>
    alert(window.event.offsetX );
    </script>
    </form>

    There's lots more here:

    http://msdn.microsoft.com/library/d...hor/dhtml/reference/dhtml_reference_entry.asp

    Ken

    "Jeff Ptak" <> wrote in message
    news:928c01c35b90$7ca8a070$...
    Can anyone tell me how to trap mouse click events in the
    Image control?

    I am trying to implement an image zoom feature using
    JavaScript where the user could "draw" a zoom box (aka
    rubber band box) on the image and the image would zoom to
    the extents of the box.

    Anyone know how to accomplish this?

    Thanks!

    Jeff Ptak
    Ken Cox [Microsoft MVP], Aug 6, 2003
    #6
    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. Ben Fidge
    Replies:
    5
    Views:
    719
    S. Justin Gengo
    Jun 15, 2004
  2. Hanover
    Replies:
    0
    Views:
    314
    Hanover
    Sep 26, 2005
  3. Replies:
    0
    Views:
    498
  4. Chris

    Events Events Events Please Help

    Chris, Aug 30, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    337
    Chris
    Aug 30, 2005
  5. Mel

    trapping events...

    Mel, Jan 5, 2004, in forum: Javascript
    Replies:
    2
    Views:
    91
    Thomas 'PointedEars' Lahn
    Jan 14, 2004
Loading...

Share This Page