12-LearningAboutEnvironment/FindingObjBotRght/index.html

<html>

  <head>
    <meta http-equiv="content-type" content="text/html;chars-
       et=iso-8859-1">
    <title>DHTML for the WWW | Finding an Objects Right and -
       Bottom Position</title>
        <script src="findDOM.js"></script>
        <script><!--
function findRight(objectID) {
  var domStyle = findDOM(objectID,1);
  var dom = findDOM(objectID,0);
  if (dom.left)
    return (domStyle.left + domStyle.clip.width);
  if (domStyle.pixelLeft)
    return (domStyle.pixelLeft + dom.offsetWidth);
  if (dom.offsetLeft)
    return (dom.offsetLeft + dom.offsetWidth);
  return (null);
}

function findBottom(objectID) {
  var domStyle = findDOM(objectID,1);
  var dom = findDOM(objectID,0);
  if (domStyle.top)
    return (domStyle.top + domStyle.clip.height);
  if (domStyle.pixelTop)
    return (domStyle.pixelTop + dom.offsetHeight);
  if (dom.offsetTop)
    return (dom.offsetTop + dom.offsetHeight);  
  return (null);
}
// -->
</script>
        <style media="screen" type="text/css"><!--
#object1  {
    position: absolute;
    left: 100px;
    top: 50px;
    width: 410px;
    border: 2px gray solid;
    visibility: visible }
--></style>
    </head>
  <body>
        <script>
        function showPos(objectID) {
          rightPos = findRight(objectID);
          bottomPos = findBottom(objectID);
          alert('Right: ' + rightPos + 'px; Bottom: ' + bott-
             omPos + 'px' );
        }
        </script>
            Click me to find my Right and Bottom positions o-
               n the screen!
        <br><br>
      <div id="object1">
        <a href="#" onClick="showPos('object1')">
            <img src="alice20.gif" width="398" height="480" -
               border="0">      
        </a>  
    </div>
    </body>

</html>