469,570 Members | 1,717 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,570 developers. It's quick & easy.

Trapping click events in the Image control

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
Nov 17 '05 #1
5 1910
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
Nov 17 '05 #2
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: +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!

Nov 17 '05 #3
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 http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Nov 17 '05 #4
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: +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!

Nov 17 '05 #5
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
Nov 17 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

18 posts views Thread by nutso fasst | last post: by
6 posts views Thread by Peter Frost | last post: by
2 posts views Thread by Mr Sparkles | last post: by
2 posts views Thread by Tamir Khason | last post: by
1 post views Thread by nashak | last post: by
19 posts views Thread by zacks | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.