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

26 New Member

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

 
<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>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</div>

Mar 26 '10 #1

Subscribe Reply

2405

acoder

16,027

Recognized Expert Moderator MVP

Seehttp://www.quirksmode.org/js/findpos.html to find the position of elements.

Mar 28 '10 #2

NKTA

New Member

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

 
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.

                newIMG = document.createElement("IMG");

                newIMG.src = obj.getAttribute("src");

                alert(obj.offsetLeft+"\n"+obj.offsetTop+"\n"+obj.style.left+"\n"+obj.style.top);

                // 0 - 0 - Not defined - Not Defined

                newIMG.style.left = parseInt(obj.offsetLeft)+"px";

                newIMG.style.top = parseInt(obj.offsetTop)+"px";

                newIMG.setAttribute("id",obj.id);//+Math.floor(Math.random()*1001)); 

                newIMG.name = obj.name;

                newIMG.className = obj.className;

                newIMG.attachEvent("onmousedown",startDrag);

                alert(obj.parentNode.id+"\n"+obj.parentNode.nodeName);

                // conect1 -- DIV

                document.getElementById(obj.parentNode.id).appendChild(newIMG);
 
                obj.setAttribute("id",obj.id+Math.floor(Math.random()*1001));

                obj.parentNode.setAttribute("id",obj.id+Math.floor(Math.random()*1001));

            }

The problem is relatively to:

Expand|Select|Wrap|Line Numbers

 
                newIMG.style.left = parseInt(obj.offsetLeft)+"px";

                newIMG.style.top = parseInt(obj.offsetTop)+"px";

// Style.left and top deals with pixels so tehrefore added "px".

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,dinamicall y:

-> < 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

New Member

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

Similar topics

11019

Relative Absolute Position

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 scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like to have it be that they would stay in the same relative position. I want to keep the image as an...

Javascript

2468

table cell problem both in ie(hegith) and mozilla(position)

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 0,0, the image should be at 0,100%. I've tried it several ways, and I can make it work in both firefox & ie, but not at the same time!!.

HTML / CSS

1718

I've Lost My Buttons - Can Anyone Help Me Find Them?

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 JavaScript (in DreamweaverMX) to display "buttons" with which to select pages in a gallery. I'm trying to "grey out" (and disable) the button for the current page when it is displayed. (This isn't rocket science here, but it's something that I...

Javascript

4251

HTML 101 Position image relative to GridView row

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 boxes. If I want to position an image over the GridView just below, for instance, the textbox in row 4 of the GridView. I don't care that it covers the other textboxes. I am successfully obtaining the textbox and the image objects in client-side...

ASP.NET

5088

find test answers in JAVA/ source code

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 must be embedded somewhere in the source code, and I would like to know if anyone knows where to find the correct answer. I would greatly appreciate it!! Thanks!! <!--put the preloads file here as it must load before the website class...

Javascript

68265

find test answers in JAVASCRIPT/ source code

by: emily224 | last post by:

Javascript

5426

Show table at div top 100 left 100 position

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 {

HTML / CSS

3283

Trying to find image position in IE.

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 ///////

Javascript

5672

Absolute Position Fix

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 not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible. Full Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

HTML / CSS

2073

Something wrong with this code, and I can't find it.

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 shouldn't be on the left hand side. Help please! Thanks. ____________________________________________________- <style type="text/css"> { Background Properties } table, tr, td { background-color:transparent; border:none; border-width:0;} body {...

HTML / CSS

9399

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10007

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9955

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8831

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7378

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6649

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5275

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3924

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2806

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General