Trapping click events in the Image control

[Jeff Ptak]

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

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/de...ence_entry.asp

Ken
"Jeff Ptak" <pt****@NOSPAM.corning.com> wrote in message
news:92****************************@phx.gbl...
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

[MS News \(MS LVP\)]

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" <na***@dao2com.com> wrote in message
news:eG****************@TK2MSFTNGP12.phx.gbl...

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: [phone]
Fax: [phone]
Mobile: [phone]
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Natty Gur]

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.remov eChild(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: [phone]
Fax: [phone]
Mobile: [phone]
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[MS News \(MS LVP\)]

Thank you
"Natty Gur" <na***@dao2com.com> wrote in message
news:%2******************@TK2MSFTNGP12.phx.gbl...

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.remov eChild(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: [phone]
Fax: [phone]
Mobile: [phone]
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Ken Cox [Microsoft MVP]]

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/de...ence_entry.asp

Ken

"Jeff Ptak" <pt****@NOSPAM.corning.com> wrote in message
news:92****************************@phx.gbl...
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