Pan and Zoom an image

Posted on 2009-04-19
Last Modified: 2012-05-06

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.

Question by:ayha1999
    LVL 9

    Accepted Solution

    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

    LVL 7

    Author Comment


    please give me a complete code.


    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Suggested Solutions

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    730 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now