Image position in relation to parent container?

JavaScript
1

Hey all,

I wish to display some text dynamically below a series of images. I need to get the position of each image, and so I require some way of getting the position of an image in relation to the div holding the images.

I managed to get the position of the image in relation to the entire page, but this was no good for my purposes.

Any help much appreciated,

Regards,

John

2

I don’t understand why you need to get a position, but I suspect you may be on the wrong track. It would be better to tell the script simply to place the text after the image element, and let the natural flow of the content determine where that is.

EDIT: … unless I’ve misinterpreted you. Do you mean ‘position’ in terms of source order? You’d best post some code to indicate what your situation is.

3

Hi Ralph,

thanks for your reply, I meant image position in terms of PX, not source order.

Im trying to get the photos to layout, with a name underneath, like they do on a facebook friends list for example.

I have got the photo thumbnails displaying correctly (the natural flow is deteriming the layout), I would just like the names to appear underneath.




<div id="friendlist">
							<p><span >Friends</span></p>
							<?
							    $imageIndex = 1;
								$aResource = getAllFriendIds($_GET['alias']);
								while ($row = mysql_fetch_assoc($aResource))
								{
									$imgPath = getPhotoByUserId($row['friendName']);
									if($imgPath == null)
									{
										$imgPath = "css/uploads/profpics/anonymous.png";
									}
									$smallImageDimensions = getimagesize($imgPath);
									$smallWidthAndHeightAttributeString = imageResize($smallImageDimensions[0], $smallImageDimensions[1], 40);
							   ?>

										<img id="smImage<?echo $imageIndex?>" src="<?echo $imgPath ?>" <?echo $smallWidthAndHeightAttributeString?> onmouseover="highlightImage('smImage<?echo $imageIndex?>', '<?echo $row['friendName']?>')" onmouseout="lowlightImage('smImage<?echo $imageIndex?>')" onclick="goToProfile('<?echo $row['friendName']?>')" />
										
							   <?
									$imageIndex ++;
								}
							?>
						 </div>
4

If that PHP code is serving up the names into the HTML, then this is probably just a CSS issue.

Could you show us the HTML that is rendered by this code? Then we can suggest how to position the name. The PHP isn’t any use for this question (as far as I can see).

5

Hi Ralph,

this is what the PHP generates,



                   <div id="friendlist" style="width:205px;clear:both;border: 3px solid #ffffff;background-color:#2ea7f1;font-size:8pt;font-style:italic;margin-top:10px;padding-bottom:5px;">
							<p style="background-color:#ffffff;"><span style="color:#2ea7f1;font-weight:bold;font-size:10pt;bold;font-style:italic;">Friends</span></p>
																	<img id="smImage1" src="css/uploads/profpics/mattius1981/12.jpg" width="31" height="40" style="border:2px solid #ffffff;margin:5px;" alt="profileimage" onmouseover="highlightImage('smImage1', 'mattius1981')" onmouseout="lowlightImage('smImage1')" onclick="goToProfile('mattius1981')" />
							   										<img id="smImage2" src="css/uploads/profpics/anonymous.png" width="30" height="40" style="border:2px solid #ffffff;margin:5px;" alt="profileimage" onmouseover="highlightImage('smImage2', 'user_a')" onmouseout="lowlightImage('smImage2')" onclick="goToProfile('user_a')" />
							   										<img id="smImage3" src="css/uploads/profpics/anonymous.png" width="30" height="40" style="border:2px solid #ffffff;margin:5px;" alt="profileimage" onmouseover="highlightImage('smImage3', 'user_c')" onmouseout="lowlightImage('smImage3')" onclick="goToProfile('user_c')" />

						 </div>

As you can see I have not yet added the usernames, as I simplu did not know where to put them.

6

Perhaps echo them (or whatever) after each image, and then they can be arranged with CSS. It’s hard to apply CSS to something that’s not there yet.

Preferably show a live example, so that the images are actually in place. Otherwise it’s a bit hard to envisage.

7

Ok ralph, thanks for your input. I will try that tommorow, I will let you know how I get on :slight_smile:

8

Yep, please do. Sorry I wasn’t more help. The real JavaScripters here would probably sort you out in a jiff, so just wait a little longer for a better reply. :slight_smile: