By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,382 Members | 1,637 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,382 IT Pros & Developers. It's quick & easy.

Getting coords of visible part of a scrolled image

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a

"Vangelis Natsios" <vn******@ekt.gr> wrote in message
news:be**********@nic.grnet.gr...
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
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.