>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
8  13980 
<ji*******@hotmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com... 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
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>
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)
On 2 Sep 2005 11:26:30 -0700, ji*******@hotmail.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.
Close, but it allows the image to be scrolled outside of its margins.
Jim Ley wrote: On 2 Sep 2005 11:26:30 -0700, ji*******@hotmail.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.
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: 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)
On 6 Sep 2005 14:09:52 -0700, ji*******@hotmail.com wrote: Jim Ley wrote: On 2 Sep 2005 11:26:30 -0700, ji*******@hotmail.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.
wrote on 06 sep 2005 in comp.lang.javascript : 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]
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 <div> and experiment with different css like overflow and clip.
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)
Hi Jim,
As my Javascript knowledge is quite limited, would you mind taking a
crack at these 4 lines?
Thanks,
Jim
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Jedispy |
last post by:
Hello,
I'm pretty new to PHP, and for starters I want to create a simple script for
creating dynamic web pages.
Here is how I want it to work:
index.html has 4 thumbnail images on it.
When users...
|
by: Preston Crawford |
last post by:
I'm looking to quickly get a photo album online. Very simple, thumbnails,
a few pages, maybe a description, but hopefully a small script that's easy
to edit and work into my existing site. I know...
|
by: Vaughn |
last post by:
I'm working on a simple screensaver (it just displays a different image
every 5 seconds) but I'm having trouble displaying an image in my form using
the BackGroundImage property. I was trying to...
|
by: Jheitmuller |
last post by:
Hi, I would like to convert a VB.NET application from being a Windows
app to an ASP.NET app. I'm new to web development, so this may be a
simple question. Is it possible to render simple drawing...
|
by: pmud |
last post by:
Hi,
I am designing a simple ASP.NET web page. I have an image button. What I
want to do is: when the cursor is over the image button, a drop down meny
should display. This menu should have tabs...
|
by: serge calderara |
last post by:
Dear all,
I need to build a web application which will contains articles (long or short)
I was wondering on what is the correct way to retrive those article on web
page.
In orther words, when...
|
by: paul.sherwood |
last post by:
Hi
Firstly let me say, and without false modesty, im a complete php noob.
Im planning on converting a simple game from python to a class using,
php powered web site. There follows my...
|
by: Maxwell2006 |
last post by:
Hi,
I am developing a simple image upload asp.net page and I am looking for a
simple image processing component to be able to change the image resolution
of jpg images and also reduce the...
|
by: www.web20developers.com |
last post by:
http://www.web20developers.com
http://www.web20developers.com/index.php?option=com_content&task=view...
Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
AJAX -...
|
by: Rick Muller |
last post by:
I'd like to use my webserver to distribute some simple python physics
apps. Ideally, I'd like to use some simple form to input a few pieces
of data, call a python program, and return some image...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
