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

**acoder** · Mar 28 '10, 05:02 PM

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

**NKTA** · Mar 28 '10, 08:34 PM

Hello, and thank you for answering.

Forgot to post what i have been trying.

This is how far i got:

Code:

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:

Code:

                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 ?

**NKTA** · Mar 28 '10, 09:15 PM

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.

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

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

Comment

Comment

Comment