Pan and Zoom an image


How can I pan (with a grabbing hand0 and zoom an image?  I have the following image in an image box in an 1.1 page. The size of the image is more than the size the div panel.

<div id="dvimage" style="HEIGHT: 500px; WIDTH: 500px" >
<asp:image id="image1" runat="server"></image>

I want to avoid the scrollbars of the div and use grabbing hand to pan the image and + and - for zooming the image either using or javascript.

pls help me.

Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

djon2003Connect With a Mentor Commented:
First, to remove the scrollbars, you use the css attribute "overflow" to none.
Then, adding the events : onmousedown, onmouseup, onmousemove. --> From the asp:image, you will be able to set in a variable when the mouse is down or not (with onmousedown, onmouseup). And in the onmousemove, you change the asp:image position.
Zooming, means resizing the asp:image. So, you change the width and height of it as you need to obtain a certain zoom level. (Better to keep in a var the original values)

Except the css attribute, the rest can either be done in VB.Net or in javascript.
So, you can google on the events I gave you and you'll find out easily.
<div id="dvimage" style="HEIGHT: 500px; WIDTH: 500px; overflow:none;" >
<asp:image id="image1" runat="server" !!!!EVENTS here .. onmousedown='JAVASCRIPT OR VB.NET FUNCTION' !!!!!></image>

Open in new window

ayha1999Author Commented:

please give me a complete code.

All Courses

From novice to tech pro — start learning today.