결과 표시창

onmouseover와 onmouseout 이벤트로 위치를 조정한다.

<SCRIPT>
function showPos(){
  str='divObj.style.top=<FONT color=blue>'+divObj.style.top+'</FONT><BR>';
  str+='divObj.style.bottom=<FONT color=blue>'+divObj.style.bottom+'</FONT><BR>';
  str+='divObj.style.left=<FONT color=blue>'+divObj.style.left+'</FONT><BR>';
  str+='divObj.style.right=<FONT color=blue>'+divObj.style.right+'</FONT><BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id="container" style="border:solid 1 blue;background-color:ffd;height:200;width:500">
<IMG id="divObj"  style="position:relative;top:30px;bottom:40;left:50;right:20" src="../../gif/flower.jpg" width=200
  onmouseover="this.style.top='60';this.style.bottom='80';this.style.left='100';this.style.right='60';showPos()"
  onmouseout="this.style.top='10';this.style.bottom='40';this.style.left='50';this.style.right='20';showPos()">
</DIV>
<SCRIPT>
str='divObj.style.position='+divObj.style.position+'<BR>';
str+='divObj.style.top='+divObj.style.top+'<BR>';
str+='divObj.style.bottom='+divObj.style.bottom+'<BR>';
str+='divObj.style.left='+divObj.style.left+'<BR>';
str+='divObj.style.pixelTop='+divObj.style.pixelTop+'<BR>';
str+='divObj.style.pixelLeft='+divObj.style.pixelLeft+'<BR>';
str+='divObj.style.posTop='+divObj.style.posTop+'<BR>';
str+='divObj.style.posLeft='+divObj.style.posLeft+'<BR>';
document.write(str);
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>