Simple image pan

#1

Quote:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow

the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

Thanks for any pointers.

Jim

#2

wrote on 02 sep 2005 in comp.lang.javascript:

Quote:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow
the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

IE only, I think, try this first without framing:

<body onmousemove='window.scrollTo(x=event.x*4-500,
y=event.y*3-200);status=x+","+y'>
<img src='myPicture.gif'
style='width:300%;'
onclick='this.style.width=(this.style.width=="300% ")?"100%":"300%"'
alt='Click me to enlarge and to move by moving the mouse'

Quote:

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

#3

On 2 Sep 2005 11:26:30 -0700, jim_adams (AT) hotmail (DOT) com wrote:

Quote:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow
the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

There's code on http://jibbering.com/routeplanner/ which does this.

Jim.

#4

Close, but it allows the image to be scrolled outside of its margins.

Jim Ley wrote:

Quote:

On 2 Sep 2005 11:26:30 -0700, jim_adams (AT) hotmail (DOT) com wrote:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow
the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

There's code on http://jibbering.com/routeplanner/ which does this.

Jim.

#5

Hi Evertjan,

Since it's for a general website, I'd like it to support IE and Firefox
at minimum. In your example, the zoom in/out works great, but the
scroll doesn't seem to do its job, even in IE. Also, it brings up a
warning about unsafe code in IE.

I thought this would be an easy one but somehow it isn't.

Just to recap, I'd like to show images at their native resolution
(screen captures), but allow the user to move them around with a mouse
in a view port (maybe an iFrame), similar to the way Google Earth does
it (click and drag around). For asthetic reasons, I don't want the
image boundaries to be movable across the viewport, just stop at the
images edges accordingly.

Thanks,

Jim

Evertjan. wrote:

Quote:

wrote on 02 sep 2005 in comp.lang.javascript:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow
the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

IE only, I think, try this first without framing:

body onmousemove='window.scrollTo(x=event.x*4-500,
y=event.y*3-200);status=x+","+y'
img src='myPicture.gif'
style='width:300%;'
onclick='this.style.width=(this.style.width=="300% ")?"100%":"300%"'
alt='Click me to enlarge and to move by moving the mouse'

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

#6

On 6 Sep 2005 14:09:52 -0700, jim_adams (AT) hotmail (DOT) com wrote:

Quote:

Jim Ley wrote:
On 2 Sep 2005 11:26:30 -0700, jim_adams (AT) hotmail (DOT) com wrote:

From a web page, I'd like to show a jpg/gif image that is larger than
its frame, and allow a user to pan around by mouse. It shouldn't allow
the user to move the frame view out of the image boundaries.

I've Googled for a while on this one, but nothing comes up that's
simple and polished.

There's code on http://jibbering.com/routeplanner/ which does this.

Close, but it allows the image to be scrolled outside of its margins.

Which is trivial to stop, just add some drag checking to see if it's
outside the bounds... it's another 4 lines of code at most...

Cheers,

Jim.

#7

wrote on 06 sep 2005 in comp.lang.javascript:

Quote:

Evertjan. wrote:
IE only, I think, try this first without framing:

body onmousemove='window.scrollTo(x=event.x*4-500,
y=event.y*3-200);status=x+","+y'
img src='myPicture.gif'
style='width:300%;'
onclick='this.style.width=(this.style.width=="300% ")?"100%":"300%"'
alt='Click me to enlarge and to move by moving the mouse'

[please do not toppost on usenet, jim]

Quote:

Since it's for a general website, I'd like it to support IE and
Firefox at minimum. In your example, the zoom in/out works great, but
the scroll doesn't seem to do its job, even in IE.

You will have to correct the numbers according to the actual hight/width
ratio. I suggest to do this by trial and error.

Quote:

Also, it brings up
a warning about unsafe code in IE.

Not on my IE6

Quote:

I thought this would be an easy one but somehow it isn't.

Just to recap, I'd like to show images at their native resolution
(screen captures), but allow the user to move them around with a mouse
in a view port (maybe an iFrame),

Use a <div> and experiment with different css like overflow and clip.

Quote:

similar to the way Google Earth does
it (click and drag around). For asthetic reasons, I don't want the
image boundaries to be movable across the viewport, just stop at the
images edges accordingly.

My code was only a code I use for a simple IE6 only application.

Feel free to use it as a staring point. I am sure your requirements can
be met, however to make thelm cross browser compatible needs a lot of
knowledge and testing.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

#8

Hi Jim,

As my Javascript knowledge is quite limited, would you mind taking a
crack at these 4 lines?

Thanks,

Jim

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Simple image pan

Javascript JavaScript language (comp.lang.javascript)

Simple image pan - 09-02-2005 , 02:26 PM

Re: Simple image pan - 09-02-2005 , 02:47 PM

Re: Simple image pan - 09-03-2005 , 05:13 AM

Re: Simple image pan - 09-06-2005 , 05:09 PM

Re: Simple image pan - 09-06-2005 , 05:15 PM

Re: Simple image pan - 09-06-2005 , 08:45 PM

Re: Simple image pan - 09-07-2005 , 10:19 AM

Re: Simple image pan - 09-07-2005 , 01:31 PM