Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question detect image width

    Hello, I'm trying to find out if I can detect the image width and heigth of a certain image somewhere on the page.

    the image is loaded in a div, so it might be ok to detect the div-width and height.
    I then want to use the width and heigth to give another div the correct size.

    I do not want to do this staticly because it's not correct for every resolution/window-size.

    I searched the web, and found this:http://www.aspandjavascript.co.uk/ja...ascript%5Fapi/

    but I don't know how to use it for my situation (if it's useable at all).

    any idea's?

    Johan

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there jspeybro,

    I extracted a part of the code that you found
    and played around with it. Hopefully it may give
    you some ideas that will then suit your purpose
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Dimensions</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    #blah {
         position:absolute;
         top:50px;
         background:#ff0000;
         border:solid 1px #000000;
         display:none;
     }
    img {
          position:absolute;
          top:50px;
          left:50px;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
      var ns4 = document.layers;
      var op5 = (navigator.userAgent.indexOf("Opera 5")!=-1) ||(navigator.userAgent.indexOf("Opera/5")!=-1);
      var op6 = (navigator.userAgent.indexOf("Opera 6")!=-1) ||(navigator.userAgent.indexOf("Opera/6")!=-1);
      var agt=navigator.userAgent.toLowerCase();
      var mac = (agt.indexOf("mac")!=-1);
      var ie = (agt.indexOf("msie") != -1); 
      var mac_ie = mac && ie;
    
    function Dimensions(Elem) {                 
     if (ns4) {
     var elem = getObjNN4(document, Elem);
        return elem.clip.height;
        return elem.clip.width;
     } 
    else {
      var elem;
    if(document.getElementById) {
      var elem = document.getElementById(Elem);
     } 
    else if (document.all) {
      var elem = document.all[Elem];
     }
    if (op5) {
      yPos = elem.style.pixelHeight;
      xPos = elem.style.pixelWidth;
     } 
    else {
      yPos = elem.offsetHeight;
      xPos = elem.offsetWidth;
     }
    
         document.getElementById('blah').style.height=yPos+"px";
         document.getElementById('blah').style.width=xPos+"px";
         document.getElementById('blah').style.left=xPos+70+"px";
         document.getElementById('blah').style.display="block";	
      } 
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div><a href="#" onclick="Dimensions('foo')">height/width</a></div>
    
    <div><img id="foo" src="http://hstrial-dbayly.homestead.com/files/dog.jpg" alt="dog"/></div>
    
    <div id="blah"></div>
    
    </body>
    </html>
    
    coothead

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks!

    I added the Dimensions-function to the body-tag with
    Code:
    <body onload="Dimensions('foo')">
    and that seemed to work too, so I think my problem is solved!

    Thanks again.

    Johan
    Last edited by jspeybro; 07-25-2004 at 09:17 PM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there jspeybro,

    no problem, you're welcome

    coothead


  •  

    Posting Permissions

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