Ændring af z-index-værdier

Opgaven knytter sig til et sæt spillekort, og går ud på, at det kort i en stak på fire, der klikkes på, skal flyttes op i toppen af stakken.

Der er tre værdier, der skal ændres for hvert kort, hver gang der klikkes på et kort:

  • Værdien af z-index
  • Værdien af left
  • Værdien af top

Kortene er positioneret absolut i forhold til et #container-element, der omslutter alle fire kort.

 
 
 
 

Html-kode

<div id="container">
  <div id="box1" class="box" 
  onclick="skift(1)">
    <p>1</p>
  </div>
  <div id="box2" class="box" 
  onclick="skift(2)">
    <p>2</p>
  </div>
  <div id="box3" class="box" 
  onclick="skift(3)">
    <p>3</p>
  </div>
  <div id="box4" class="box" 
  onclick="skift(4)">
    <p>4</p>
  </div>
</div>

Stylesheet kode

#container {
  position:relative;
  margin: 0;
  padding:1em 1em 1em 0;
  height:225px;}

.box {
  position:absolute;
  width:100px;
  height:150px;
  border:1px solid black;}

.box p {
  padding:0 10px;
  margin:0;
  font-size:20px;
  color:white;}

#box1 {left:0;top:0;background:red;
  z-index:1;}
#box2 {left:25px;top:25px;background:blue;
  z-index:2;}
#box3 {left:50px;top:50px;background:green;
  z-index:3;}
#box4 {left:75px;top:75px;background:maroon;
  z-index:4;}

JavaScript

<script type="text/javascript">
function skift(n) {
switch(n) {
  case 1:
    document.getElementById('box1').style.zIndex="4";
    document.getElementById('box1').style.left="75px";
    document.getElementById('box1').style.top="75px";
    document.getElementById('box2').style.zIndex="1";
    document.getElementById('box2').style.left="0";
    document.getElementById('box2').style.top="0";
    document.getElementById('box3').style.zIndex="2";
    document.getElementById('box3').style.left="25px";
    document.getElementById('box3').style.top="25px";
    document.getElementById('box4').style.zIndex="3";
    document.getElementById('box4').style.left="50px";
    document.getElementById('box4').style.top="50px";
  break;
  case 2:
    document.getElementById('box2').style.zIndex="4";
    document.getElementById('box2').style.left="75px";
    document.getElementById('box2').style.top="75px";
    document.getElementById('box3').style.zIndex="1";
    document.getElementById('box3').style.left="0";
    document.getElementById('box3').style.top="0";
    document.getElementById('box4').style.zIndex="2";
    document.getElementById('box4').style.left="25px";
    document.getElementById('box4').style.top="25px";
    document.getElementById('box1').style.zIndex="3";
    document.getElementById('box1').style.left="50px";
    document.getElementById('box1').style.top="50px";
  break;
  case 3:
    document.getElementById('box3').style.zIndex="4";
    document.getElementById('box3').style.left="75px";
    document.getElementById('box3').style.top="75px";
    document.getElementById('box4').style.zIndex="1";
    document.getElementById('box4').style.left="0";
    document.getElementById('box4').style.top="0";
    document.getElementById('box1').style.zIndex="2";
    document.getElementById('box1').style.left="25px";
    document.getElementById('box1').style.top="25px";
    document.getElementById('box2').style.zIndex="3";
    document.getElementById('box2').style.left="50px";
    document.getElementById('box2').style.top="50px";
  break;
  case 4: 
    document.getElementById('box4').style.zIndex="4";
    document.getElementById('box4').style.left="75px";
    document.getElementById('box4').style.top="75px";
    document.getElementById('box1').style.zIndex="1";
    document.getElementById('box1').style.left="0";
    document.getElementById('box1').style.top="0";
    document.getElementById('box2').style.zIndex="2";
    document.getElementById('box2').style.left="25px";
    document.getElementById('box2').style.top="25px";
    document.getElementById('box3').style.zIndex="3";
    document.getElementById('box3').style.left="50px";
    document.getElementById('box3').style.top="50px";
  break;
}}
</script>

Denne side er senest opdateret: 1. September, 2006