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]

Re: Getting coords of visible part of a scrolled image


"Vangelis Natsios" <vnatsios@ekt.g r> wrote in message
news:bedvkp$856 $1@nic.grnet.gr ...[color=blue]
> 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[/color]
the[color=blue]
> image is visible (or, equally, how long the image has scrolled) and[/color]
trigger[color=blue]
> the function changing the text.
>
> Any ideas?
>
> Vangelis Natsios
>
>[/color]

Vangelis,

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

Regards,

Silvio Bierman