Sign in to follow this  
Cygnus_X

[web] Div Position

Recommended Posts

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
text block for each picture Use a mouseover js event to unhide the block on a per-picture basis I have done the above, but I'm stuck on how to line up the div blocks with the photos. Specifically, I'd like the top left corner of the block to match the top right corner of the picture. Hopefully this picture will help illustrate what I'm doing: http://www.lordsofmidnight.com/Pictures/DivPosition.png As you can see, the pictures are displayed in table format. When I place hte mouse over one of the photos in this example, the text block appears. However, because the pictures are in tables, I can't record their position to assign an absolute coordinate. I have tried using relative position with little success. Is there anyway to auto-locate the div block in respect the picture somehow? Thanks.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 javascript 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 javascript event looks at the image position via the javascript 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 on the screen. This provides me with a neat little effect for my site.

And it only took me 3 days to figure out how to do that :)

Share this post


Link to post
Share on other sites
Can you get away with just using the alt or title attribute of the HTML img tag? It's kind of what they are there for, after all.

If instead you have a crazy requirement like "captions must popup instantly!", then I had to do something like this a while ago. Here is an example of how I did it.

<html>

<head>
<style>
#tooltip
{
position:absolute;
display:none;
width:150px;
height:150px;
background-color:ffffaa;
overflow:none;
border:solid 5px brown;
padding:5px;
}
img
{
cursor:crosshair;
}
</style>
<script language="javascript">
function showToolTip(text)
{
var block = document.getElementById("tooltip");
block.innerText = text;
block.style.display = "block";
}
function hideToolTip()
{
var block = document.getElementById("tooltip");
block.style.display = "none";;
}
function moveToolTip()
{
var block = document.getElementById("tooltip");
block.style.left = (event.clientX + 15) + "px";
block.style.top = (event.clientY - 25) + "px";
}
document.onmousemove = moveToolTip;
</script>
</head>
<body>
<div id="tooltip" style=""></div>
<img src="img1.png" onmouseover="showToolTip('Hello, world')" onmouseout="hideToolTip()"/>
<img src="img2.png" onmouseover="showToolTip('What, what?')" onmouseout="hideToolTip()"/>
</body>
</html>


There is only one DIV tag on the page to hold the caption text. I change the text depending on what image is being captioned. I move the div tag to the location of the mouse, that way it's always where the user is looking and I don't have to worry about tracking the image's coordinates. And that's about it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this