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
- <body>
- <div id="playground">
- <!-- Main table -->
- <table id="mainTable" width="100%" border="5" cellspacing="5" cellpadding="1">
- <tr>
- <!-- Left Table -->
- <div id="menu1left">
- <td width="25%">
- <table id="table1left" width="100%" border="1" cellspacing="1" cellpadding="1">
- <caption><p><i>Menu Left</i></p></caption>
- <tr>
- <td align="center">
- <div id="action1" style="position:absolute; top:92px; left:75px; width:45px; height:45px">
- <!-- top:400px; left:75px; width:45px; height:45px"> -->
- <img id="action" name="actioned" src="Action.jpg" width="45" height="45" />
- </div>
- <br/><br/><br/>Action
- </td>
- <td align="center">
- <div id="conect1" style="position:absolute; top:92px; left:230px; width:45px; height:45px">
- <!-- top:400px; left:225px; width:45px; height:45px"> -->
- <img id="conect" name="conected" src="conect.jpg" width="45" height="45" />
- </div>
- <br/><br/><br/>Conect
- </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- </div>