Where do I can find an image panning? I need to use it with C#, because I need to pass the coordinates of the panning to C# to perform a zoom.
Thank you.

Nothing to do with C#.

Must be done 100% in JavaScript.

C# code does not and can not run in the browser.

Oh, I suppose you *could* use C# code with a Graphics object to custom select a portion of an image and then, when the user pans, you go all the way back to the server to get an entirely new selected image. The performance would suck so bigtime that nobody would use it. Not to mention it would bring your server to its knees.

So...

You asked the question in the right forum, just not sure why you brought C# into it.

You want to see a demo of doing it in JavaScript? I've never done it, but it's not hard. In fact, I can think of two very different ways to do it.

Reading what you wrote again...

Okay, I think I see what you are saying. *AFTER* the person pans and *THEN* clicks on zoom you want to be able to tell the server where the user panned *TO*. Right? Not a problem.

Yes. The problem is that I have the zoom in/out functions created in C# and for the panning I have to use JavaScript because in C# I don't have Mouse Events.
And my big problem is how I can take the variables (this are the coordinates of the zoom and zoom factor) from the C# to use it for the panning in JavaScript and how do I make a request to the server to send him the new coordinates?
And then I have to send back the new variables for the zoom to work properly.
I know is not ok what I have created but I can't go back because I'm very close to my dead line.
Thank You.

And I use a asp ImageMap like component to show the image. And I was wondering if I can use his ID in the JavaScript? Because is I change it in <img I can use it in C#.

I have created the panning in javascript, but the only problem is how do I make the request to the server for the new panning image?
I use xmlhttprequest but I get Access denied. I another problem is how do I send the new parameters back in c# after the panning. I tried with the input type hidden but I get object type null.
This is my javascript code:
    var jsx1 = "<%=jsx1%>";
    var jsx2 = "<%=jsx2%>";
    var jsy1 = "<%=jsy1%>";
    var jsy2 = "<%=jsy2%>";
    var jszoom_factor = "<%=jszoom_factor%>";
    var jsmyX = "<%=jsmyX%>";
    var jsmyY = "<%=jsmyY%>";
    var flag;
    var request;
    var mou**** = 0;
    var mousey = 0;
    var jssessionId = "<%=jssessionId%>";

        function onDown(obj){
            flag = true;
                mou**** = window.event.x;
                mousey = window.event.y;

                var coordinates = 'x: ' + mou**** + ', y: ' + mousey;
              // alert (coordinates);
            }

        function onUp(){
            flag = false;
        }

        function onOver(elem){
            elem.style.cursor = "all-scroll";
        }

        function createRequest() {
            try {
                request = new XMLHttpRequest();
            } catch(e) {
              try {
                request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
              } catch(e) {
                try {
                  request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                  request = false;
                }
              }
            }
            if(!request)
              alert("Error");
        }

        function onMove() {
            var diferentaX;
            var diferentaY;

            var panelx = 800;
            var panely = 600;

            if (flag)
            {
                if (jsmyX > panelx / jszoom_factor)
                {
                    diferentaX = window.event.x - mou****;
                    jsx1 += diferentaX / jszoom_factor;
                    jsx2 += diferentaX / jszoom_factor;

                    if (jsx1 < 0)
                    {
                        jsx1 = 0;
                        jsx2 = int.parse(panelx / jszoom_factor);
                    }
                    if (jsx2 > jsmyX)
                    {
                        jsx2 = jsmyX;
                        jsx1 = int.parse(jsx2 - panelx / jszoom_factor);
                    }
                }

                if (jsmyY > panely / jszoom_factor)
                {
                    diferentaY = window.event.y - mousey;
                    jsy1 += diferentaY / jszoom_factor;
                    jsy2 += diferentay / jszoom_factor;
                    if (jsy1 < 0)
                    {
                        jsy1 = 0;
                        jsy2 = int.parse(panely / jszoom_factor);
                    }

                    if (jsy2 > jsmyY)
                    {
                        jsy2 = jsmyY;
                        jsy1 = int.parse(jsy2 - panely / jszoom_factor);
                    }
                }
            }

            window.open(url);
            createRequest();
            var url = "http://192.168.1.66/bigview/bigviewserver.dll?sessid=" + jssessionId + "&doc=118" + "&x1=" + jsx1 + "&y1=" + jsy1 + "&x2=" + jsx2 + "&y2=" + jsy2 + "&sf=" + jszoom_factor;
            window.open(url);
            request.open("GET", url, true);
            request.setRequestHeader("Content-Type", "application/x-javascript;");
            request.onreadystatechange = updatepage;
            request.send("");
        }

        function updatepage() {
            if(request.readyState == 4)
                if(request.status == 200)
                   /* Here I tried to send the new values to C#
                  document.myForm.x1.value = jsx1;
                  document.myForm.x2.value = jsx2;
                  document.myForm.y1.value = jsy1;
                  document.myForm.y2.value = jsy2;
                    */
                   alert("Server is done!");
                else if (request.status == 404)
                   alert("Request URL does not exist");
                else
                   alert("Error: status code is " + request.status);
        }

Make up your mind...are you going to use Ajax to do the update or are you going to simply submit the main <FORM> of the page???

You have a hodge-podge combination of both in there.

Could I suggest that you get it working, first, by simply submitting the <FORM> back to the server? It will be simpler.

Just to clarify...

By "hodge podge" I was referring to this chunk of code:



The red call to window.open is completely bogus. The variable url is empty at that point.

The blue call is similarly worthless. There is no reason to open a new window when you are making an Ajax call that is going to update the current window.

But more importantly, the whole function has to be wrong, I think. As written, it tries to make a call back to the Ajax server *EVERY TIME THE USER PANS THE IMAGE*. Even a move of one pixel would cause a hit on the server. Surely that's not what is wanted. Surely you should only go to the server when:
(1) The user changes the zoom level. Need new image at the new zoom level.
(2) The user pans the image to the limit of the panning. Need a new image that is centered on the panned-to point so that panning can continue.

Now, if you have the server power of google, you might go further than this. You might "anticipate" the user and load more "tiles" of image in the background. But that requires you to be indeed using a tiled image, and I don't see evidence that you are doing so (but I could be missing it).

Hello. I would like to know how could I manage the Asp components in javascript, because this is my big problem now, I made the request, it is ok, but I don't know how to display my new image in the same place as the original image.
The image is displayed in an Asp .net 3.5 Image.
Thank you.

That depends entirely on what the Ajax URL you are hitting returns to you. That is, WHAT does this URL give you:

var url = "http://192.168.1.66/bigview/bigviewserver.dll?sessid=" + jssessionId
           + "&doc=118" + "&x1=" + jsx1 + "&y1=" + jsy1
           + "&x2=" + jsx2 + "&y2=" + jsy2 + "&sf=" + jszoom_factor;

??

If it returns nothing but an image, then really there is no reason to use AJAX. I'm sorry, but I just don't have enough information on what you are doing to be able to help you in a meaningful way.