Getting coords of visible part of a scrolled image

[Vangelis Natsios]

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

 

[Silvio Bierman]

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