[펌글] DIV의 z-index 와 자바스크립트를 이용해서 레이어의 위치를 바꾸는 예제

By | 7월 14, 2008


DIV의 z-index 와 자바스크립트를 이용해서 레이어의 위치를 바꾸는 예제 (레이어를 클릭하면 바뀜)

첫번째 레이어
두번째 레이어

<html>
<head>
  <script language=JavaScript>

    //z-index 를 서로 바꿔주는 메서드 2개 작성 (z-index 는 숫자가 클수록 힘이 쎄다-_-!)
 
    function z_arg()
    {
      layer1.style.zIndex = "2";  //자바스크립트에서 접근할 때는 z-index 가 아니라 zIndex 이다.
      layer2.style.zIndex = "1";
    }

    function z_arange()
    {
      layer1.style.zIndex = "1";
      layer2.style.zIndex = "2";
    }
  </script>
</head>
<body>

  <div id="layer1" style="width:200px; height:200px; position:absolute; left:10px; top:51px;  background-color:#FFFF00; z-index:2;" onclick="z_arg()">
    첫번째 레이어
  </div>
  <div id="layer2" style="width:200px; height:200px; position:absolute; left:30px; top:100px; background-color:#00FFFF; z-index:1;" onclick="z_arange()">
    두번째 레이어
  </div>
</body>
</html>

- 출처 : 네이버지식인 -
http://kin.naver.com/detail/detail.php?d1id=1&dir_id=10105&eid=kbdtKUYsXpr2uHejFyUczPsX/lbciHzz&qb=ei1pbmRleA==&pid=fcqBGdoi5UhssbyDtXssss--417497&sid=SHqj4T2JekgAAGyl98c

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments