Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Find image position on load

Status
Not open for further replies.
HowardMarks

HowardMarks

MIS
Jan 26, 2001
550
GB
Hi guys

I have found a great script which gives me the x and y coordinates of an image on the page. This works fine if I run it from a button after the page has loaded.
The trouble is, I need to find out the position as the page loads, and use this information to accurately position some divs on top of it. Trouble is, when the page is loading, the script always returns '0,0' as the image position.

My knowledge of how javascript works is slightly below par i must admit, and I'm not sure in what order things get loaded etc. Am I chasing the end of the rainbow here by trying to find out the position of this image at the same time as it is drawn? Is there any way around this so I can place some text accurately over specific coordinates on top of this image?

any help would be great

thanks in advance

Nick (Webmaster)

info@npfx.com
 
Sort by date Sort by votes
How about repositioning the div immediately after the page has loaded: <body onload="positionDivs();">?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Would it help to put the JavaScript to detect the image coordinates in the BODY of the HTML, immediately following the placement of the IMG?

--Dave
 
Upvote 0 Downvote
Why use JavaScript at all? This will place the words "Text Overlay" on top of the image "logo.gif" exactly 40 pixels from the top of the image and 30 pixels from the left of the image.

Code: 
<div>
<div style="position:relative; left: 40px; top: 30px;">Text Overlay</div>
<img src="logo.gif">
</div>

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Hi Adam

Thanks for that suggestion. In fact that was how I was going to do it until I realised that it will only work if there is just 1 div. I have around 15 branches to appear on the map, and putting the code for each div underneath each other means that it throws out all of the relative positioning, because they are all positioned relative to each other rather than the image.

On the point of the anchor image, I believe it must be possible to pinpoint the location of an image and then use those coordinates to position other stuff, because thats exactly what happens with a dhtml menu i found - place an image with the id 'anchor' on the page somewhere and the menu is drawn in that exact location. The code is too complex for me to unravel tho to find out how it happens. I guess it might be something to do with forcing a reload of the page after the image location has been determined, or something.

Thanks for your ongoing help

Nick (Webmaster)

info@npfx.com
 
Upvote 0 Downvote
Using multiple text overlays:
Code: 
some text before...
<span style="position:relative">
  <span style="position:absolute;left:20px;top:20px;">Overlay 1</span>
  <span style="position:absolute;left:40px;top:50px;">Overlay 2</span>
  <span style="position:absolute;left:10px;top:70px;">Overlay 3</span>
  <img src="logo.gif">
</span>
some text after
Include z-Index if some overlap

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Thanks again Adam but alas still no joy. The spans do not appear in the right locations but still seem to be altered by the tags of the other spans. It seems as if there is no way to stop the actual writing of a span or div tag from creating some sort of gap in the rendered html.

I'm still looking for a solution.



Nick (Webmaster)

info@npfx.com
 
Upvote 0 Downvote
You've lost me. It works fine on my computer. Maybe I'm not understanding what the problem is. Do you have some code or a URL you can post?

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
I have eventually come across a radically different solution which has proved to be far more reliable than placing divs. I used ASPJpeg, the imaging component installed on the server, to write the branch names onto the actual image and then send the binary to the browser. Then I created an image map also matching the coordinates to overlay the image and provide the links to the branches.
You can see the results at
thanks for all your help

Nick (Webmaster)

info@npfx.com
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
669
JScannell
JScannell
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
734
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
778
JScannell
JScannell
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
558
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top