SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How do I get the absolute position of an image?

    Hi!
    How do I get the absolute position of an image (html image tag without style)?

    thx in advance
    Chrisi

  2. #2
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here the page i've just created just for you:

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>get the absolute position of an image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript" type="text/javascript">
    var isDHTML=false;
    var isLayers=false;
    var isAll=false;
    var isID=false;
    
    
    if (document.getElementById){
    	isID = true; isDHTML = true;
    	}
    	else {
    		if (document.layers) {
    			isLayers = true;
    			isDHTML = true;
    		}
    		else {
    			if (document.all) {
    				isAll = true;
    				isDHTML = true;
    			}
    	}
    }
    
    function findDOMObj(ObjectID){
    	if (isID) { return (document.getElementById(ObjectID));}
    	else {
    		if (isAll){ return (document.all[objectId]);}
    		else {
    			if (isLayers) { return  (document.layers[ObjectID]);}
    		}
    	}
    }
    function GetAbsPosition(Obj){
    	var left = findDOMObj(Obj).style.posLeft;
    	var top = findDOMObj(Obj).style.posTop;	
    	alert("Top:" + top + " Left:" + left);
    }
    </script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    
    <body>
    <div id="Layer1" style="position:absolute; left:159px; top:81px; width:320px; height:235px; z-index:1; background: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;" onclick="JavaScript:GetAbsPosition(this.id);" >This 
      is layer 1: click to get abs position</div>
    <div id="Layer2" style="position:absolute; left:266px; top:240px; width:392px; height:177px; z-index:2; background: #6699CC; layer-background-color: #6699CC; border: 1px none #000000;"  onclick="JavaScript:GetAbsPosition(this.id);" >This 
      is layer 2: click to get abs position</div>
    <img id="KevBooks" src="http://sitepoint.com/graphics/kevbook.gif" alt="Kev Books" longdesc="http://sitepointforums.com" onclick="JavaScript:GetAbsPosition(this.id);" /> 
    </body>
    </html>
    Study the code to understand what's happaning...
    Azizur Rahman
    Web Application Developer

  3. #3
    SitePoint Member
    Join Date
    May 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Thanks for your script.
    But I still have the same problem i can't get the position of the img. I moved it with some table-tags but this script still returns that the img is on position 0,0.
    Can u help me?

    <table width=300 height=400>
    <tr>
    <td width=100>
    </td>
    <td>
    <img id="KevBooks" src="http://sitepoint.com/graphics/kevbook.gif" alt="Kev Books" longdesc="http://sitepointforums.com" onclick="GetAbsPosition(this.id);" />
    </td>
    </table>

    thx in advance
    Chrisi

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm on the phone right now - but just to let you know i'll give you an answer soon.

    While you're waiting - look into the offset attributes for the image.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    he he - REALLY couldn't find an easy solution.
    See - without you specifying a top - i'm not sure
    how to access it conventionally.

    However i did promise you a solution and SO:

    function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

    However that might not make sense straight away... SO...
    [CODE]
    Code:
    <html>
     <body>
      <table width=300 height=400>
        <tr>
          <td width=100></td>
          <td>
              <img id="KevBooks" src="http://sitepoint.com/graphics/kevbook.gif" alt="Kev Books" longdesc="http://
    sitepointforums.com" onclick="GetAbsPosition(this.id);" border=1>
          </td>
        </tr>
      </table>
      <div name="Shower" id="Shower" style="position:absolute;top:0;left:50;height:20;width:40;border:1px
    solid blue" border=1>HERE</div>
     </body>
    </html>
    <script language="Javascript">
    
    var de       = document.getElementById;
    var YourImg  = de('KevBooks');
    
    function findTop(iobj){
            ttop=0;
            while (iobj){
                    ttop+=iobj.offsetTop;
                    iobj=iobj.offsetParent;
                    }
            return ttop;
            }
    
    alert(  findTop( YourImg )  );
    
    de('Shower').style.top=findTop( YourImg );
    
    </script>

    This should demonstrate how it works just fine for you.
    If you want to see a demo then it's at:
    http://www.passway.org/Chrisi.html

    There you go.
    If you need more just let me know

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to do it this way is extremely long winded. I would do this from another, angle

    PHP Code:
    <html>
    <
    head>
    <
    title></title>

    <
    script type="text/JavaScript">
    <!--

    ns4 = (document.layers)? true:false
    ie4 
    = (document.all)? true:false

    function init() {
        if (
    ns4block document.blockDiv
        
    if (ie4block blockDiv.style
        block
    .xpos parseInt(block.left)
        
    block.ypos parseInt(block.top)
    }

    function 
    moveTo(obj,x,y) {
        
    obj.xpos x
        obj
    .left obj.xpos
        obj
    .ypos y
        obj
    .top obj.ypos
    }

    function 
    moveBy(obj,x,y) {
        
    obj.xpos += x
        obj
    .left obj.xpos
        obj
    .ypos += y
        obj
    .top obj.ypos
    }

    function 
    showObject(obj) {
        if (
    ns4obj.visibility "show"
        
    else if (ie4obj.visibility "visible"
    }

    function 
    hideObject(obj) {
        if (
    ns4obj.visibility "hide"
        
    else if (ie4obj.visibility "hidden"
    }

    // -->
    </script>
    </head>

    <body onLoad="init()">

    <a href="javascript:alert('X: ' + block.xpos)">xpos </a>,
    <a href="javascript:alert('Y: ' + block.ypos)">ypos </a>
    <br />Visibility:
    <a href="javascript:showObject(block)">show</A>,
    <a href="javascript:hideObject(block)">hide</A>
    <br />MoveTo:
    <a href="javascript:moveTo(block,100,100)">(100,100)</a>,
    <a href="javascript:moveTo(block,200,160)">(200,160)</a>,
    <a href="javascript:moveTo(block,300,240)">(300,240)</a>
    <br />MoveBy:
    <a href="javascript:moveBy(block,10,0)">(10,0)      </a>,
    <a href="javascript:moveBy(block,-10,0)">(-10,0)    </a>,
    <a href="javascript:moveBy(block,0,10)">(0,10)      </a>,
    <a href="javascript:moveBy(block,0,-10)">(0,-10)    </a>

    <img src="http://64.4.16.24/EN_SG_140x60.gif" id="blockDiv" style="position:absolute; left:100px; top:100px; background-color:orange; layer-background-color:orange;">

    </body>
    </html> 
    now you have complete control over the thing, enjoy

  7. #7
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Andrew - but you KNOW when it's shoot-down time

    1) she only wanted to know how to get the top of the image.

    2) she wanted to get the top of an image that DOESN'T have a style tag - hence putting it into a div with a style tag is cheating

    3) Your line:
    <img src="http://64.4.16.24/EN_SG_140x60.gif" id="blockDiv" style="position:absolute; left:100px; top:100px; background-color<img src="images/smilies/redface.gif" border="0" alt="">range; layer-background-color<img src="images/smilies/redface.gif" border="0" alt="">range;"></div>
    Is ... to say the least ... crap - but i guess i'm being pedantic - i know what you meant here.

    I've experienced her problem before - you have an image that's in a table - and it's not being positioned absolutely, but you want to find the top of it all the same...
    I believe the solution i posted to be one of the only sure answers to this problem.

    Feel free to have another hack at it if you want

    he he

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  8. #8
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hehe i should of read the post,

    How do I get the absolute position of an image (html image tag without style)?
    I only read your thread Flawless

    bloody smilies messing up the post again btw lol.
    Let me have another go and think about it this time then lol

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol - YEP
    You REALLY did deserve that one

    I'll see what you come up with when i get back to the office after lunch!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  10. #10
    SitePoint Member
    Join Date
    May 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    thanks for all your help. i think i'll handle this with CSS . its much too complicated with javascript.

    thx
    Chrisi

  11. #11
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No WAY!

    Whoa - i'm sorry - but i really resent that!
    it's TWO lines:

    You want to find the top of 'MyImage'.... right?
    well you don't have to worry about what the function does:

    <script langague="Javascript">
    // You don't need to worry about this
    function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

    //This is all you need:
    findTop(doucment.all.MyImage);

    </script>

    When it comes down to it - that's only one line!!!

    I SO don't understand why that's too complex for you?!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  12. #12
    SitePoint Member
    Join Date
    May 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well.. I don't have problems using this code but this looks like there's no possibility to move the image.

    i also don't like to use code i don't understand
    function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

    Could you explain to me what += does and what the offsetparent property returns?

    Thank u very much
    Last edited by Chrisi; May 30, 2002 at 13:20.

  13. #13
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to know the postion of an absolute object I dont see why it does not work?

    for any relative object it will give you zero unless offcourese you've specified it top and left location in css.
    Azizur Rahman
    Web Application Developer

  14. #14
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Azizur - that makes no sense - concentrate on the words, THEN write them.

    2) Chrisi:

    You're trying to find the absolute top of an object that isn't positioned absolutely...
    So you need to find how far from the top of the page is, but you haven't specified it...
    If you try using style.top or pixelTop - you'll find it's either undefed or 0... this is because it hasn't been assigned.
    If you try using offsetTop - it tries to get the distance between the top of the object and it's parent... but in the case of your image - it's inside a table cell... and the distance is 0.

    So what that function does is:
    function findTop(iobj){
    line 1: ttop=0;
    line 2: while (iobj){
    line 3: ttop+=iobj.offsetTop;
    line 4: iobj=iobj.offsetParent;
    }
    line 5: return ttop;
    }

    So - you pass it iobj - the handle of the object you want to find the top of - example: findTop(document.all.MyImg);

    Then the function sets a variable 'ttop' to 0 - so that there is no hangover from previous callings of the function.

    Line 2 says that while iobj (the object you sent it) exists - it should do line 3 and 4.

    line 3 says add the distance between iobj and the parent of it to ttop. (initially 0 - since it's the distance between the td and the image)

    line 4 REASSIGNS iobj as that parent you just checked the distance to... so NEXT time round the while loop it will find the distance between the current parent, and the parent above it.

    It will continue while iobj exists - which it won't when it gets to the top of the dom (ie gone through all the parents) adding all the distances together to get the total.
    This is the only way i can think of finding the top of an object that doesn't have it's top set by you.

    You can then use this distance to set the top of another item as i showed you in the mockup page:

    http://www.passway.org/Chrisi.html

    document.all.movingOBJECT.style.top=findTop(document.all.otherOBJECT);

    I REALLY hope this is what you wanted - coz otherwise this is a lot of time wasted - but i think i've interpretted your desire properly.

    Let me know if this doesn't cover everything.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  15. #15
    SitePoint Member
    Join Date
    May 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank u for your explanaition. I thought that .offsetparent returns a value but it's an object.

    thx for all ur help
    chrisi

  16. #16
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's ok - any time.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •