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:

[url]http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp[/url]

Ken


"Jeff Ptak" <ptakja@NOSPAM.corning.com> wrote in message
news:928c01c35b90$7ca8a070$a001280a@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" <natty@dao2com.com> wrote in message
news:eGe%23H89WDHA.2204@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: +972-(0)9-7740261
> Fax: +972-(0)9-7740261
> Mobile: +972-(0)58-888377
>
>
> *** Sent via Developersdex [url]http://www.developersdex.com[/url] ***
> 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: +972-(0)9-7740261
Fax: +972-(0)9-7740261
Mobile: +972-(0)58-888377


*** Sent via Developersdex [url]http://www.developersdex.com[/url] ***
Don't just participate in USENET...get rewarded for it!

[MS News \(MS LVP\)]

Thank you


"Natty Gur" <natty@dao2com.com> wrote in message
news:%23qcdp5%23WDHA.2352@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: +972-(0)9-7740261
> Fax: +972-(0)9-7740261
> Mobile: +972-(0)58-888377
>
>
> *** Sent via Developersdex [url]http://www.developersdex.com[/url] ***
> 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:

[url]http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp[/url]

Ken

"Jeff Ptak" <ptakja@NOSPAM.corning.com> wrote in message
news:928c01c35b90$7ca8a070$a001280a@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