473,320 Members | 1,945 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,320 software developers and data experts.

Find the position of an image on a table and place an image on top.

26
Hello again.

I have a doubt in how to obtain the position of an image in a table cell.

What i want to do is:
- Find the image position, and add a new image on top of that image.

The problem, is that the image is inserted in the table so doing with the offset (Left / Top) gives its position regarding its offsetparent and posts the nem image in the wrong place. How do i discorver the image position regarding the document itself ?

The only way i have to get it around is to specify to the DIV tag with position (Left and Top) that envolves the image with a fixed position, but only woks in screens with my resolution. Another screens the image position changes. Is any way of making the position issue flexible regarding the resolution of the screen ?


Heres a demo of my table code :
Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3. <div id="playground">
  4.  
  5. <!-- Main table -->
  6.  
  7. <table id="mainTable" width="100%" border="5" cellspacing="5" cellpadding="1">
  8. <tr>
  9.  
  10. <!-- Left Table -->
  11.  
  12. <div id="menu1left">
  13. <td width="25%">
  14.  
  15. <table id="table1left" width="100%" border="1" cellspacing="1" cellpadding="1">
  16. <caption><p><i>Menu Left</i></p></caption>
  17. <tr>
  18.     <td align="center">
  19.     <div id="action1" style="position:absolute; top:92px; left:75px; width:45px; height:45px">
  20.     <!-- top:400px; left:75px; width:45px; height:45px"> -->
  21.     <img id="action" name="actioned" src="Action.jpg" width="45" height="45" />  
  22.     </div>
  23.     <br/><br/><br/>Action
  24.     </td>
  25.     <td align="center">
  26.     <div id="conect1" style="position:absolute; top:92px; left:230px; width:45px; height:45px">
  27.     <!-- top:400px; left:225px; width:45px; height:45px"> -->
  28.     <img id="conect" name="conected" src="conect.jpg" width="45" height="45" />  
  29.     </div>
  30.     <br/><br/><br/>Conect
  31.     </td>
  32. </tr>
  33. <tr>
  34. <td>&nbsp;</td>
  35. <td>&nbsp;</td>
  36. </tr>
  37. <tr>
  38. <td>&nbsp;</td>
  39. <td>&nbsp;</td>
  40. </tr>
  41. <tr>
  42. <td>&nbsp;</td>
  43. <td>&nbsp;</td>
  44. </tr>
  45. <tr>
  46. <td>&nbsp;</td>
  47. <td>&nbsp;</td>
  48. </tr>
  49. <tr>
  50. <td>&nbsp;</td>
  51. <td>&nbsp;</td>
  52. </tr>
  53. <tr>
  54. <td>&nbsp;</td>
  55. <td>&nbsp;</td>
  56. </tr>
  57. <tr>
  58. <td>&nbsp;</td>
  59. <td>&nbsp;</td>
  60. </tr>
  61. <tr>
  62. <td>&nbsp;</td>
  63. <td>&nbsp;</td>
  64. </tr>
  65. <tr>
  66. <td>&nbsp;</td>
  67. <td>&nbsp;</td>
  68. </tr>
  69. </div>
  70.  
Mar 26 '10 #1
3 2388
acoder
16,027 Expert Mod 8TB
Seehttp://www.quirksmode.org/js/findpos.html to find the position of elements.
Mar 28 '10 #2
NKTA
26
Hello, and thank you for answering.

Forgot to post what i have been trying.

This is how far i got:

Expand|Select|Wrap|Line Numbers
  1. if ( obj.id == "*the original button" || obj.id == "*the original button") {                    // This cycle creates the ciopy and puts on top of the original object. The original object, by the other side continues attached to the event and whatever i wnat to do with it.
  2.                 newIMG = document.createElement("IMG");
  3.                 newIMG.src = obj.getAttribute("src");
  4.                 alert(obj.offsetLeft+"\n"+obj.offsetTop+"\n"+obj.style.left+"\n"+obj.style.top);
  5.                 // 0 - 0 - Not defined - Not Defined
  6.                 newIMG.style.left = parseInt(obj.offsetLeft)+"px";
  7.                 newIMG.style.top = parseInt(obj.offsetTop)+"px";
  8.                 newIMG.setAttribute("id",obj.id);//+Math.floor(Math.random()*1001)); 
  9.                 newIMG.name = obj.name;
  10.                 newIMG.className = obj.className;
  11.                 newIMG.attachEvent("onmousedown",startDrag);
  12.                 alert(obj.parentNode.id+"\n"+obj.parentNode.nodeName);
  13.                 // conect1 -- DIV
  14.                 document.getElementById(obj.parentNode.id).appendChild(newIMG);
  15.  
  16.                 obj.setAttribute("id",obj.id+Math.floor(Math.random()*1001));
  17.                 obj.parentNode.setAttribute("id",obj.id+Math.floor(Math.random()*1001));
  18.             }
  19.  
The problem is relatively to:
Expand|Select|Wrap|Line Numbers
  1.                 newIMG.style.left = parseInt(obj.offsetLeft)+"px";
  2.                 newIMG.style.top = parseInt(obj.offsetTop)+"px";
  3. // Style.left and top deals with pixels so tehrefore added "px".
  4.  
Ok, now the code truly adds the image back to the document, but not on its original place but under it.

Mapping to be more specific, i have this:

-> < DIV id=action1 >
-------> <IMG id = "action" />
-> </ DIV >

Now i want this,dinamically:

-> < DIV id=action1 >
-------> <IMG id = "action" />
-------> <IMG id = "actionXXXX (random number generated)" />
-> </ DIV >

But the position of the new IMG (actionXXX) is supposed to the on top of the first (action).

In the original image (action), OffsetLeft and Top doesn't return any value since i have not defined any on the HTML tag, and i wanted to keep that way due to resolution problems between pcs. All i want is that image to be centered on the specific cell, nothing else.

So therefore i acess the properties of the image (action) and see its style.left and style.top and the pick the enw image and set attribute (style.left and style.top) to be equal. But not working.

Some doubts got surfaced, should i add a new element DIV ? Or adding simply the image to the existing DIV is the way to go ?
Mar 28 '10 #3
NKTA
26
See http://www.quirksmode.org/js/findpos.html to find the position of elements.
I have already checked the link, and honestly is pretty cool how he discover the position, resuming and please correct me if i am wrong,
curtop and curleft will be adding each distance both from the element to his father and plus the distance from his father to his own father and so on untill reaches the end and no more parents can be found.
But there's a but, but not butt, .. i'm trying to use object after trying to use same function and seing that the object has been tempered. It gives now null or non existent. To use such method, its perhaps allways better to use a clone of the object and destroy with that function.
Mar 28 '10 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
0
by: joeZ | last post by:
hi there! I'm just going crazy with this stuff I want to do I though was simple. I just want to locate an image (which is linkeable) below the bottom of a cell. I mean, if the cell is at...
1
by: Anna K. | last post by:
Hi Experts, I'm new to JavaScript and web-based apps development, so I'll tell you right off that I don't really know my way around it as of yet. I'm trying to create a code library set with...
2
by: Dale | last post by:
This seems like it should be simple and I am pretty sure I've done similar things a hundred times before but I sure can't seem to get it right this time. I have a GridView with a column of text...
2
by: emily224 | last post by:
Hello, I have been trying to understand this source code, which I retreived from my online course test. I would like to know how to find the answer for the question on the test. Im sure the answer...
4
by: emily224 | last post by:
Hello, I have been trying to understand this source code, which I retreived from my online course test. I would like to know how to find the answer for the question on the test. Im sure the answer...
6
by: yogarajan | last post by:
Hi All <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <style type="text/css"> #map {
7
by: Paul | last post by:
Hi, I'm trying to find the left and top position of an image in MSIE. In HTML the image is <img border=0 src="image.png" id="myimage" style="position:relative;" / The javascript is ...
1
by: empiresolutions | last post by:
Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have...
2
by: everly | last post by:
Hi, I'm helping my friends band and making their MySpace. I messed something up and I can't figure out what it is. Everything is all out of whack on the bottom half of the page. The comments...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
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
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.