Canvi de visibilitat de les capes

color pla
color pla
color pla


En carregar-se el document, apareix una pila de tres rectangles, en la qual el blau ocupa el nivell superior, el verd el mitjà i el vermell l'inferior.

Cada vegada que fem clic en el botó, els nivells canviaran, donant pas a les sis combinacions possibles; acabades aquestes, el procés torna a començar.

La funció canvi(), que s'executa inicialment gràcies a un onLoad i després cada vegada que fem clic en el botó, canvia els nivells de les capes.

Cal observar que on les capes no tenen contingut no es produeixen opacitats; en aquest sentit el recurs a zIndex és menys potent que el recurs a visibility.


Aquest document té un programa de JavaScript exterior, el contingut del qual és el següent:

num=0;
function canvi(){
   num=num+1;
   if(num>6){
      num=1;
   }
   if(num==1){
      document.getElementById("d21").style.zIndex="2";
      document.getElementById("d22").style.zIndex="3";
      document.getElementById("d23").style.zIndex="4";
   }
   if(num==2){
      document.getElementById("d22").style.zIndex="4";
      document.getElementById("d23").style.zIndex="3";
   }
   if(num==3){
      document.getElementById("d21").style.zIndex="4";
      document.getElementById("d22").style.zIndex="2";
   }
   if(num==4){
      document.getElementById("d21").style.zIndex="3";
      document.getElementById("d23").style.zIndex="4";
   }
   if(num==5){
      document.getElementById("d22").style.zIndex="4";
      document.getElementById("d23").style.zIndex="2";
   }
   if(num==6){
      document.getElementById("d21").style.zIndex="4";
      document.getElementById("d22").style.zIndex="3";
   }
}