A quick question about div positions. I have several images on one page (listed out dynamically by php) that I'd like to have a caption for on mouseover. The caption is dependent upon the picture. My method is as follows: Create a hidden

Surround the picture in a div element and use the (left + width) and (top) of the div to position the caption. Don't forget to set the position:absolute; style attribute.

I'm a bit of a noob with divs... could you post example code?

I'm assuming I need to do something like.....

<div id ="1"><img src="..." onMouseOver="toggleDiv(\'div1\',1)" onMouseOut="toggleDiv(\'div1\',0)"1"></div>

...

<div id="div1" position:absolute top: document.getElementById('1').style.top + xx; left: document.getElementById('1').style.left + yy>some text that i want</div>

[Edited by - Cygnus_X on December 30, 2007 6:43:57 PM]

i dont know if it will help u but when im controlling multiple objects via the left and top properties i put them on the id or name tag.. like id="600x480" (600 is the left value and 480 is the top) i do that so i only need to call the id or name..its just much more convenient for me

Thanks for the advice..

This is what I wanted to accomplish for all those interested. It turned out rather well. Place your mouse over the pictures to get the full effect.

http://www.lordsofmidnight.com/divpositioncode.php

EDIT: Well.. it doesn't seem to work in IE. My version is giving an 'out of memory' error at "if (obj.offsetParent) {". But it works great in FireFox. Anyone have any other browsers? Anyone see anything wrong with my code?

[Edited by - Cygnus_X on January 2, 2008 11:48:06 PM]

Final post I hope. I got my code working... I'd just like feedback on usability across different browsers, comments on style, etc. If anyone has opera, that would help. Thanks.

http://www.lordsofmidnight.com/test.php

PS: Place the mouse over the '?' images. Text should pop up.

It works in firefox, better than the other version you posted, that was pretty slow.
How did you implement this now? Did you use a div for the image, and one for the popup thing?
I would have used one div for both (because they clearly belong together), and and unordered list (ul) for the popup thing (it looks enough like a list to use ul).
That would make things more clear, if now for a reason css is disabled for someone, or you delete the css file on your server by accident, there is no way to tell what text belonged to what question mark.
It is important to know that your site is usable without css, cause that means it is usable for a screen reader or text browser.

I'll give a brief overview of what I'm doing..

PURPOSE
The page is a schedule of events for a user. I had originally listed each event as a line item, but that became cumbersome as the page grew to 100+ lines and it became impossible to track things such as invasions against an opponent (in this game, attacking with 2 units in one group is different than attacking with 1 unit in 2 groups... yet the two events were showing up the same).

RESOLUTION
My goal was to group all events into a single line item, then list the individual pieces in a 'pop-up' div via a mouseover event on the picture. This would provide the user with a brief overview of his standing while allowing him to see the details as needed.

CODE
As I pull data out of the database, I sort it such that common events show up together (ie, via ID or leed time, whichever one is relevant). I then store 2 things. 1st, I assign numbers to each pic and place that number in my onmouseover and onmouseout &#106avascript function calls. So, pic one is <img src = '....' onmouseover = function1(..., ID), onmouseout = function2(..., ID)>. I then keep a description in array of MyArray[ID] = 'Some Description' as I loop through all the rows that are returned from the database. At the end of the code, i list each description in a div via looping through the array. I.E, <Div MyID = 'ID'>Some Description</div>. Finally, the onmouseover &#106avascript event looks at the image position via the &#106avascript function offsetparent, and I can use that to assign a location to the appropriate div (via its ID) as well as place it to visible. I cheat by setting each div to hidden via css at the start such that it doesn't show up &#111;n the screen. This provides me with a neat little effect for my site.<br><br>And it &#111;nly took me 3 days to figure out how to do that :)