position:relative 와 position:absolute 을 이용하여 이미지위에 사각형 그리기

2010. 1. 23. 02:07

position:relative 와 position:absolute 을 이용하여 이미지위에 사각형 그리기

2010. 1. 23. 02:07 in 3. Implementation/VB / Java Script

아래 코드를 참고하자.

<html>
<STYLE TYPE="text/css">

.attention {color:red};
.test {
border-color: red;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
};

</STYLE>
<body>
<div style="position:relative;left:50px;top:30px;height:100px;width:100px">
    Some text inside the DIV that will be hidden by the image because the image
   will be positioned over this flowing text.
<img src="sample.gif" style="position:absolute; left:0px; top:0px">
<div style="position:absolute;left:0px; top:0px;width:50px;height:50px" class="test" >
</div>
<div><br>
<table border width="600">
<tr >
<td width="300">
   <div style="position:relative; " >
       <img src="sample.gif" style="position:relative; left:0px; top:0px; width:50%" >
       
   <div>
</td>
<td width="300">
   <div style="position:relative; " >
       <img src="sample.gif" style="position:relative; left:0px; top:0px; width:50%" >
       <div style="position:absolute;left:0px; top:0px;width:50px;height:50px" class="test" ></div>
   <div>
</td>
</tr>
</table>
</body>
</html>

아래 코드 역시 참고

<html>

<STYLE TYPE="text/css">

        .attention {color:red};
.test {
border-color: red;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
};

</STYLE>
<script type="text/javascript">

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

function test() {
   var i = getPos(event.srcElement);
   pos1.innerText = i.x + " " + i.y;

}

function test2() {
   var i = getPos(event.srcElement);
   pos2.innerText = i.x + " " + i.y;
}

</script>
<body>

<img src="sample.gif" onload="test()" />
<div id="pos1" ></div>

<table>
<tr><td>sdf</td><td>
<img src="sample.gif" onload="test2()" />
<div id="pos2" ></div>

</td></tr></table></body>
</html>

참고 : http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag

How To Find Position of Span Tag



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

       <script type="text/javascript">

      function whereAmI( oLostObject )

      {

        var iOffsetTop = 0;

        var iOffsetLeft = 0;

        while( oLostObject.parentNode )

        {

          iOffsetTop += oLostObject.offsetTop;

          iOffsetLeft += oLostObject.offsetLeft;

          oLostObject = oLostObject.parentNode;

        }  

        var sCoordinates = ( iOffsetLeft + "," + iOffsetTop );

        alert( sCoordinates );

        return sCoordinates;

      }

    </script>


</head>

<body>

<div style="text-align:right">

      <div style="padding:50px">

        <span style="positiosn:absolute; top 50px; left:100px;" onmouseover="whereAmI( this )" >I am Here.</span>

      </div>

    </div>

</body>

</html>