Simple image pan

Discussion in 'Javascript' started by jim_adams@hotmail.com, Sep 2, 2005.

  1. Guest

    >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
     
    , Sep 2, 2005
    #1
    1. Advertising

  2. McKirahan Guest

    <> wrote in message
    news:...
    > >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>
     
    McKirahan, Sep 2, 2005
    #2
    1. Advertising

  3. Evertjan. Guest

    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)
     
    Evertjan., Sep 2, 2005
    #3
  4. Jim Ley Guest

    On 2 Sep 2005 11:26:30 -0700, 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.
     
    Jim Ley, Sep 3, 2005
    #4
  5. Guest

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

    Jim Ley wrote:
    > On 2 Sep 2005 11:26:30 -0700, 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.
     
    , Sep 6, 2005
    #5
  6. Guest

    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)
     
    , Sep 6, 2005
    #6
  7. Jim Ley Guest

    On 6 Sep 2005 14:09:52 -0700, wrote:

    >Jim Ley wrote:
    >> On 2 Sep 2005 11:26:30 -0700, 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.
     
    Jim Ley, Sep 7, 2005
    #7
  8. Evertjan. Guest

    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)
     
    Evertjan., Sep 7, 2005
    #8
  9. Guest

    Hi Jim,

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

    Thanks,

    Jim
     
    , Sep 7, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kurt

    Pan/Zoom Image class?

    Kurt, Oct 22, 2003, in forum: Python
    Replies:
    1
    Views:
    455
    Diez B. Roggisch
    Oct 22, 2003
  2. alex23
    Replies:
    0
    Views:
    412
    alex23
    Apr 2, 2008
  3. Czenek

    Pan/Zoom with Matplotlib

    Czenek, Oct 18, 2008, in forum: Python
    Replies:
    1
    Views:
    345
    Czenek
    Oct 18, 2008
  4. Replies:
    3
    Views:
    640
    edexter
    May 24, 2009
  5. Replies:
    1
    Views:
    112
    Jim Ley
    Aug 17, 2005
Loading...

Share This Page