473,372 Members | 1,338 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

Getting coords of visible part of a scrolled image

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
1 2898

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Scott M | last post by:
Hi, I am writing a small game that is using a form 800 * 600. The form can be scrolled vertically up to a height of 1200 (basically the form can be scrolled down one screen vertically). The...
7
by: Jane Austine | last post by:
As you add more items, say text lines, in Text widget, it gets too slow and almost impractical to use on. Take idle for example. If the text gets bigger(e.g. print...
1
by: Marek Kotowski | last post by:
I have a HTML content with some pages defined as <div>...</div>. One of them is visible while the rest is hidden (the visibility can be changed on client side). The problem: standard window...
6
by: CoreyMas | last post by:
Hello All, Here is what I would like to do I am creating a game program that displays a map (preferably in hexes but that is another matter) and whenever the user is over the "map" I want to...
1
by: Weston C | last post by:
Here's something I'm working on: for a click on a given element, I want to be able capture the x/y coordinates of the mouse -- that is, the mouse coordinates relative to the top left corner of said...
6
by: tshad | last post by:
I need to get to a status label I have on my footer section of my datalist. There is no event happening that would go to the footer. I am just doing some processing and want to update the label...
3
by: Rhishabh07 | last post by:
how to define coords in an image for an area shape i m using <img src="left.jpg" width="350" height="29" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap">...
0
by: Lloyd Sheen | last post by:
I have a table (produced from a datalist) that has an image followed by text. The image is a 32px scalled down version of the actual image. When the user moves over the image I want the image to...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.