<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<OBJECT type="application/x-oleobject"CLASSID="CLSID:1A683544-F15C-9344-29A0-24030107643B"></OBJECT>

<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=EUC-KR" />
<style type="text/css">
#data1 {
 position: absolute;
 top: 100px; left: 100px;
 padding: 0;
 width: 200px;
 height: 200px;
 background-color: #ff0;
 clip:rect(0px 200px 200px 0px);
}

#data1 h3{
 margin: 0;
 padding: 5px;
 font-size: smaller;
 background-color: #006;
 color: #fff;
}

#contained{
 margin: 10px;
}
</style>

<script type="text/javascript">
//<![CDATA[
 var bottom = 200;
 var hidden = false;
 var obj = null;
 function clipItem(){
  obj = document.getElementById("data1");
  if(hidden){
   showItem();
  }else{
   hideItem();
  }
 }

 function hideItem(){
  bottom -= 1;
  var clip = "rect(0px, 200px, " + bottom + "px,0px)";
  document.title = bottom;
  obj.style.clip = clip;
  if(bottom == 20){
   hidden = true;
  }else{
   setTimeout("hideItem()", 1);
  }
 }

 function showItem(){
  bottom += 1;
  var clip = "rect(0px, 200px, " + bottom + "px, 0px)";
  obj.style.clip=clip;
  if(bottom == 200){
   hidden = false;
  }else{
   setTimeout("showItem()", 1);
  }
 }
//]]
</script>
</head>
<body>
<div id="data1">
<h3 onclick="clipItem();">Click to expand or collapse</h3>
<div id="contained">
this is the text contained within the div block.
</div>
</div>

<img src="building.bmp" style="position:absolute;top:320px;left:50px;clip:rect(30px 222px 222px 30px)">
</body>
</html>

'정리없는자료 > Javascript' 카테고리의 다른 글

javascript json encoding  (0) 2011.12.12
javascript 년/월/일 뒤의 날짜 리턴  (2) 2008.05.23
javascript 클리핑  (0) 2008.05.05
javascript 테이블 셀이동  (0) 2008.05.05
javascript CapLock  (0) 2008.05.05
javascript 달력  (0) 2008.05.03

+ Recent posts