Getting coords of visible part of a scrolled image

Giganews Newsgroups
Subject: Getting coords of visible part of a scrolled image
Posted by:  Vangelis Natsios (vnatsi…@ekt.gr)
Date: Tue, 8 Jul 2003

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

Replies