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/d...hor/dhtml/reference/dhtml_reference_entry.asp

Ken


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]

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("<volyline filled=\"False\"
strokecolor=\"red\" strokeweight=\"2pt\" points=\"" +
arrPoint.toString() +"\"></volyline>");
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

 

[MS News \(MS LVP\)]

Thank you

 

[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/d...hor/dhtml/reference/dhtml_reference_entry.asp

Ken

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