Getting coords of visible part of a scrolled image

Discussion in 'Javascript' started by Vangelis Natsios, Jul 8, 2003.

  1. I want to create a page with a scrolling image that will cause different
    messages to appear on another part of the page (say, another <div>) as the
    image will scroll. Imagine something like this:


    Image DIV Text DIV
    (Visible Area)
    +-----------+ Image +---------+
    +-----------|------------------------+ | |
    | o | | | Man |
    | /|\ | o___/ | | |
    | / \ | /\ /\ | | |
    +-----------|------------------------+ | |
    +-----------+ +---------+
    <- ->
    Scroll Scroll
    Left Right

    And then, scrolling to the left, another part of the image becomes visible
    and the text in the text <div> automatically changes:

    Image DIV Text DIV
    (Visible Area)
    +-----------+ Image +---------+
    +------|-----------|-----------------+ | |
    | o | | | | Dog |
    | /|\ | o___/| | | |
    | / \ | /\ /\| | | |
    +------|-----------|-----------------+ | |
    +-----------+ +---------+
    <- ->
    Scroll Scroll
    Left Right

    I've already got a couple of scripts that output the messages in the text
    area, and I know there are a lot of scripts to perform the scrolling, if
    this can't be done with the standard browser scrollbars imposed from the
    style sheet. So what I actually need is a way to find out which part of the
    image is visible (or, equally, how long the image has scrolled) and trigger
    the function changing the text.

    Any ideas?

    Vangelis Natsios
     
    Vangelis Natsios, Jul 8, 2003
    #1
    1. Advertising

  2. "Vangelis Natsios" <> wrote in message
    news:bedvkp$856$...
    > I want to create a page with a scrolling image that will cause different
    > messages to appear on another part of the page (say, another <div>) as the
    > image will scroll. Imagine something like this:
    >
    >
    > Image DIV Text DIV
    > (Visible Area)
    > +-----------+ Image +---------+
    > +-----------|------------------------+ | |
    > | o | | | Man |
    > | /|\ | o___/ | | |
    > | / \ | /\ /\ | | |
    > +-----------|------------------------+ | |
    > +-----------+ +---------+
    > <- ->
    > Scroll Scroll
    > Left Right
    >
    > And then, scrolling to the left, another part of the image becomes visible
    > and the text in the text <div> automatically changes:
    >
    > Image DIV Text DIV
    > (Visible Area)
    > +-----------+ Image +---------+
    > +------|-----------|-----------------+ | |
    > | o | | | | Dog |
    > | /|\ | o___/| | | |
    > | / \ | /\ /\| | | |
    > +------|-----------|-----------------+ | |
    > +-----------+ +---------+
    > <- ->
    > Scroll Scroll
    > Left Right
    >
    > I've already got a couple of scripts that output the messages in the text
    > area, and I know there are a lot of scripts to perform the scrolling, if
    > this can't be done with the standard browser scrollbars imposed from the
    > style sheet. So what I actually need is a way to find out which part of

    the
    > image is visible (or, equally, how long the image has scrolled) and

    trigger
    > the function changing the text.
    >
    > Any ideas?
    >
    > Vangelis Natsios
    >
    >


    Vangelis,

    Implement onscroll on the image div. In the onscoll check the
    imageDiv.scrollLeft and imageDiv.scrollTop to determine which part of the
    image is visible. Based on that update the text.

    Regards,

    Silvio Bierman
     
    Silvio Bierman, Jul 8, 2003
    #2
    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. simast
    Replies:
    2
    Views:
    390
  2. Albert Wiersch
    Replies:
    14
    Views:
    1,607
    Neredbojias
    Aug 19, 2005
  3. Lloyd Sheen
    Replies:
    3
    Views:
    1,917
    Alexey Smirnov
    Jan 8, 2008
  4. Andrew Poulos

    Get relative coords of clicked image

    Andrew Poulos, Aug 6, 2008, in forum: Javascript
    Replies:
    1
    Views:
    100
    Thomas 'PointedEars' Lahn
    Aug 6, 2008
  5. Jedrin
    Replies:
    1
    Views:
    121
    Thomas 'PointedEars' Lahn
    Jun 24, 2009
Loading...

Share This Page