Mouse controlled scrollable layers(?)

[Midd_Knight]

Not exactly sure what to call this. I have an image of decent size, 2800x2500. The image is map for a game. I cannot resize the map due to majorly losing quality, or even readablity.

What I'm trying to do, is on a 800x600 scale, have a few tables, two 10% sides for the map's "key". The other 80% displaying the map itself by an Iframe. Every thing works fine of course, however using the main scroll bars to filter through the large image and find what you want is a bit annoying.

Is there a client side language that would help me produce something simular to Jasc's Paint Shop Pro's set up. Or even server side, though I don't see what could do that. Where you can just left click on your image, and drag it around to the area you want to focus on. Be it left, or right click.. doesn't really matter.

Perhaps DHTML? I pretty fluent in the main languages.. Js, dhtml, php, asp, cgi.. and all of that. But I don't know how I'd even go about doing this. Has anyone ran into the same situation?

Any advice, work arounds or ideas are greatly welcome. Just need a bump in the right direction.

Thanks a head of time.

[IKLOP]

Welcome to the forums :)

I don't have time to write any code, but I can tell you how I would go about doing it. Since it's client side, you'll be limited to javascript.

First, in your body tag, you would need three event handlers: onmousemove, onmousedown, and onmouseup.

You would have a variable that keeps track of whether the mouse is down or up, and that variable would only be change in the onmousedown and onmouseup event handlers. Thats pretty much all the onmousedown and onmouseup needs to do. As a little extra, in the onmousedown handler you could set the cursor to a hand like it does in psp and set it back to a pointer in onmouseup.

Now to the onmousemove event handler. This would first check if the mouse is down by checking against that variable set in the onmousedown/onmouseup handlers. If the mouse is down, then you need to calculate how far the mouse has moved since the last onmousemove event was called (in both the x and y direction). This would be easiest to do by having a couple variables for the old mouse position and subtracting from the current position. Once you've calculated how much the mouse has moved, use the javascript scroll methods to scroll the window.

That's about it. That should give you a little bump in the right direction.

[Midd_Knight]

Ok, sounds doable enough. Thanks for your time IKLOP.

By the way, I enjoyed the layout and design of your site. The colors are well picked. Thanks for the welcome!

[IKLOP]

Thanks :)

I'm actually getting sick of all the yellow and I'm working on a new look, I seem to go through a new one every few months.

Let us know if you get stuck with the coding side of it, I'm sure there are plenty of us who could give some help.