Simple image pan

jim_adams · Sep 2, 2005

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

McKirahan · Sep 2, 2005

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

Will this do? Watch for word-wrap.

<html>
<head>
<title>mapScroll.htm</title>
<body>
<p align="center">
<b>Scroll to view the map.</b><br><br>
<iframe
src="http://freepages.genealogy.rootsweb.com/~monticue/photogallery/photo203
08/colorado_map.jpg"
width="580" height="300" marginheight="0" marginwidth="0" align="center"
frameborder="0"></iframe>
</p>
</body>
</html>

Evertjan. · Sep 2, 2005

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

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'

Jim Ley · Sep 3, 2005

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.

jim_adams · Sep 6, 2005

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

jim_adams · Sep 6, 2005

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

Jim Ley · Sep 7, 2005

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.

Evertjan. · Sep 7, 2005

wrote on 06 sep 2005 in comp.lang.javascript:
[please do not toppost on usenet, jim]

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.

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

Not on my IE6

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 said:
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.

jim_adams · Sep 7, 2005

Hi Jim,

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

Thanks,

Jim

wxpython and zoom/pan image	3	May 24, 2009
How do I upload image to firebase and retrieve it using picasso	14	Apr 28, 2019
Zoom and Pan An Image In A Webrowser	1	Aug 17, 2005
Pan/Zoom Image class?	1	Oct 22, 2003
Any simple javascript to show an image when mouse over?	3	May 21, 2007
Simple Toggle checkbox function on IMAGE click	4	Jul 21, 2008
dynamic image map not working in IE6	0	Jun 9, 2006
Positioning a small gif file over another image - possible?	2	Aug 12, 2008

Simple image pan

jim_adams

McKirahan

Evertjan.

Jim Ley

jim_adams

jim_adams

Jim Ley

Evertjan.

jim_adams

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads