Les capes són un dels elements que permeten donar més dinamisme a les pàgines web. El seu comportament està molt lligat amb les propietats CSS, per tant, és convenient tenir clars aquests conceptes preliminars. La descripció bàsica sobre els estils CSS la podeu trobar a la pràctica 3 del mòdul 4.

Tant l'IE com el NN permeten treballar amb capes, però, malauradament, ho fan de maneres diferents. S'haurà de tenir en compte aquest aspecte per que les pàgines siguin compatibles.

En aquesta pràctica estudiarem quines són les propietats per treballar amb les capes en cadascun dels principals navegadors i implementarem unes funcions que puguin fer compatible el treball amb capes de forma transparent per l'usuari, independentment del navegador emprat.

  Elements CSS, HTML i Javascript en aquest capítol.
Directives <div> i <span> : Defineixen una capa dins el bloc <body>.
Directiva <style> : Defineix els estils a aplica a un document HTML.
Objecte document.all : Objecte de IE.
Objecte document.layers : Objecte de Netscape Navigator versió 4.
Objecte document.getElementById : Objecte de Netscape Navigator versió 6.
Propietats CSS per a la manipulació de capes.
 
1.-
Propietats CSS per a capes.
Les capes són seccions de la pàgina web, amb contingut HTML, que poden tenir diverses propietats com ara: posició, mida, colors, visibilitat, etc.

Per definir una capa, s'ha d'incloure tot el seu contingut dins les directives <div>.... <div> o <span> ..... <span>. També existeixen les directives <layer>, <ilayer>, però aquestes solament són reconegudes per NN, per tant no les utilitzarem.

Les capes es poden enniuar, és a dir, es pot crear una capa dins una altra. La seva utilització és la mateixa que a totes les capes, però, part de les seves propietats les pot heretar de la seva capa mare.

Les propietats CSS aplicables a les capes són els següents:

position: Pot ser absolute o relative. La posició absoluta ofereix les dimensions des de la
    cantonada superior esquerra de la finestra. La posició relativa pren com a referència
    l'última posició seqüencial de l'objecte a la finestra del navegador.
left: Distància des del lateral esquerre de la finestra del navegador fins el lateral esquerre de
    la capa.
top: Distància des de la part superior de la finestra del navegador fins a la part superior de la
    capa.
width: Indica l'amplada de la capa.
height: Alçada de la capa.
clip: Defineix l'àrea rectangular visible de la capa. S'indiquen els quatre costats de la
    següent forma: clip: rect(dalt, dreta, baix, esquerra), també pot ser auto, on s'agafa la zona
    per defecte de la capa.
visibility: Indica la visibilitat de la capa. Els valors són: visible, hidden, inherit. El valor per
    defecte és inherit, és a dir, hereta la visibilitat de la capa mare. S'ha de tenir en compte
    que la finestra del navegador també és considerat com una capa.
z-index: Indica l'eix Z, és a dir, la posició Z de la capa. És un valor numèric, les capes amb un
    z-index més gran que altres quedaran situades per sobre en el cas de superposició.
background-color: Color de fons de la capa. Amb NN4 aquesta propietat solament aplica el
    fons al text. Per a tota la capa, en el NN4 s'ha d'usar la propietat explicada a continuació.
layer-background-color: Color de fons de la capa per a NN4.
background-image: Imatge de fons. Amb el NN4 solament aplica la imatge al text que
    contingui la capa. Per a tota la capa, en el NN4 s'ha d'aplicar la propietat explicada a
    continuació.
layer-background-image: Imatge de fons de la capa per a NN4.
overflow: Indica que s'ha de fer si el contingut de la capa no hi cap dins l'àrea definida.
    Pot ser: scroll, hidden i auto. Amb scroll fem aparèixer una barra de desplaçament, amb
    hidden queda inaccessible la part no visible i auto permet decidir al navegador quan han
    d'aparèixer les barres de desplaçament. Aquesta propietat no és reconeguda per NN4.

Per defecte, si no s'indica cap color de fons, la capa quedarà transparent.

A les capes també s'hi poden aplicar les propietats CSS vistes a la pràctica 3 del mòdul 4. En aquesta pràctica no les utilitzarem per facilitar la claredat dels exemples.
 

2.- Aplicació dels estils per capes.

L'exemple següent ens mostra com hem utilitzat algunes d'aquestes propietats. S'han definit tres capes: "capa1", "capa2" i "capa3". La seva ubicació dins el bloc <body> s'ha fet amb l'ús de les directives <div> per la primera i tercera i <span> per a la segona. A cadascuna d'elles se li ha donat un identificador. El contingut de cada capa és HTML convencional.

Per aplicar les propietats de les capes s'utilitza la directiva <style> dins el bloc <head> i referències amb identificador per cada capa. També es podria haver fet, utilitzant el paràmetre "style=..." dins la directiva corresponent, però, ja que el nombre d'estils a aplicar és llarg, queda millor si es defineix dins el bloc <head>.

Podem observar com per a cada capa se li assigna una posició absoluta, és a dir, les referències left i top preses des de la cantonada superior esquerra de la finestra (origen de coordenades absolutes x=0 i y=0).

Amb les propietats CSS left i top es posiciona cada capa, les dimensions indicades corresponen a la cantonada superior esquerra de la capa, comptades des de l'origen de coordenades. Amb width i height indiquem la mida de la capa. Si no s'indica es prendrà com a mida el mínim imprescindible per encabir el seu contingut, tal com passa a la "capa3".

Observeu com s'utilitzen per definir el color de fons les propietats background-color i layer-background-color amb el mateix color. Això és perquè la primera és interpretada per IE i la segona per NN. La "capa 3" no té definit un color de fons, això vol dir que serà transparent.

El paràmetre z-index indica la posició en l'eix Z. La capa que tingui un valor més alt es situarà per sobre de la que té un valor més baix. La "capa1" i la "capa2" no estan sobreposades, per tant no té cap importància el valor de z-index. En canvi, la "capa1" i la "capa3" si que estan sobreposades, per tant és necessari que z-index de la "capa3" sigui superior al z-index de la "capa1" per aconseguir que el text quedi per sobre de la imatge.

A la "capa1" hi ha la propietat overflow:auto, en aquest cas, com que el contingut de la capa és més gran que l'espai disponible, apareix una barra de desplaçament vertical. El NN4 no reconeix aquesta propietat.

Proveu de canviar el valor de visibility a hidden, o els valors de z-index de les capes 1 i 3, o el valor de position a relative, etc i observeu els canvis que es produeixen.

Dins el bloc <head>:
...
<style type="text/css">
  #capa1 {position: absolute; left:350px; top:30px; width:200px; height:200px;
                        visibility:visible; z-index:1;background-color:#B0B1EE;
                        layer-background-color:#B0B1EE;overflow:auto}
  #capa2 {position: absolute; left:50px; top:30px; width:286px; height:402px;
                        visibility:visible; z-index:1;background-color:#FFC0FF;
                        layer-background-color:#FFC0FF}
  #capa3 {position: absolute; left:250px; top:330px; visibility:visible; z-index:2}
</style>
...


Dins el bloc <body>:
...
<div id="capa1">
  <u>Capa 1.</u> Descripció.<br>El <b>Parc Nac...
</div>
...
<div id="capa3">
  <font color="#ff0000" size="38">Aigüestortes</font>
</div>
...
<span ID="capa2">
  <u>Capa 2.</u> Aigüestortes.<br>
  <img src="imatge.jpg">
</span>
...


 
3.- Capes interactives
Les propietats de les capes assignades en temps de disseny també poden ser modificades en temps de visualització, és a dir, mentre es visualitza la pàgina. JavaScript ens servirà per modificar aquestes propietats en temps de visualització.

Ara bé, l'accés a les propietats de les capes no es fa de la mateixa manera segons sigui un navegador IE o NN. A més, el NN tampoc ho fa de la mateixa manera entre el NN4 i el NN6.
Per tant és necessari detectar si el navegador és NN4, NN6 o IE.

En la pràctica anterior ja s'ha explicat com es detecta el navegador. En aquest exemple assignarem tres variables al valor true en cas que s'hagi detectat el corresponent navegador. La detecció es fa comprovant si existeixen els objectes "document.layers", "document.all" i "document.getElementById" propis per a cada tipus de navegador.

- ns4 valdrà true si és NN versió 4, en cas contrari valdrà false.
    var ns4=document.layers;
- ie valdrà true si és IE, en cas contrari valdrà false.
    var ie=document.all;
- ns6 valdrà true si és NN versió 6 o és IE, en cas contrari valdrà false.
    var ns6=document.getElementById;

L'accés a les propietats es fa de forma diferent segons el navegador.

- Per a Netscape Navigator versió 4 utilitzem:
    document.layers.NomCapa.propietat = valor

- Per a Netscape Navigator versió 6 utilitzem:
    document.getElementById( ' NomCapa ' ).style.propietat = valor

- Per a Internet Explorer utilitzem:
    document.all["NomCapa"].style.propietat = valor ó
    document.all.NomCapa.style.propietat =valor (es pot obviar el text "document.all")

El codi del següent d'exemple s'ha d'afegir al de l'exemple anterior. Fent clic a sobre dels botons, podrem commutar entre capes per mostrar la imatge, el text descriptiu del Parc Nacional d'Aigüestortes, o bé, el seu plànol d'accés.

S'hi han afegit dues capes més:

La capa "planol" conté la imatge del plànol d'accés i un botó per commutar les capes de descripció i d'imatge del parc. Si observem les propietats d'aquesta capa en la seva definició dins la directiva <style> del bloc <head> podem veure que per defecte està oculta, ja que la seva propietat visibility val hidden.

La capa "botoactplanol" solament conté un botó que ha de servir per fer la commutació de capes. La seva ubicació dins de la capa ens és útil per posicionar-lo fàcilment dins la pàgina i ocultar-lo quan s'estigui mostrant el plànol.

Cada botó activa una funció JavaScript que realitza l'acció esperada: fer la commutació de capes.

El codi JavaScript conté la detecció del tipus de navegador que s'assigna a ns4, ie i ns6. També conté 4 funcions capaON(), capaOFF(), veure() i ocultar().

La funció capaON() s'encarrega de posar a visible la propietat visibility de la capa que se li posa com a paràmetre. Observeu com amb tres "if" es permet accedir a l'acció corresponent segons sigui el navegador. Mitjançant el "eval()" corresponent, es construeix la cadena de codi segons s'ha indicat prèviament i s'executa per modificar la propietat visibility. La funció capaOFF() fa el mateix, però, posant el valor de visibility a hidden.

La funció veure() s'encarrega de cridar les funcions "capaON()" i "capaOFF()" segons si la capa s'ha de fer visible o no, per mostrar el plànol. El mateix fa la funció ocultar() per ocultar la capa del plànol i mostrar les capes: descripció, imatge i nom del parc.

Afegiu el codi següent al codi descrit en l'exemple anterior i podreu comprovar el seu funcionament amb tots tres navegadors.


Afegir al bloc <head> dins de la directiva <style>:

#planol {position: absolute; left:120px; top:60px; width:396px; height:299px;
                                                                                    visibility:hidden; z-index:1}
#botoactplanol {position: absolute; left:500px; top:410px; visibility:visible; z-index:1}


Afegir el següent codi JavaScript dins el bloc <head>:

<script language="Javascript">
  var ns4=document.layers;
  var ie=document.all;
  var ns6=document.getElementById;

  function capaON(pNomCapa)
  {
    if (ns4) eval("document.layers." + pNomCapa + ".visibility = 'visible' ");
    if (ie) eval("document.all." + pNomCapa + ".style.visibility = 'visible' ");
    if (ns6 && !ie) eval("document.getElementById(' " + pNomCapa + " ').style.
                                                                                              visibility = 'visible' ");
  }
  function capaOFF(pNomCapa)
  {
    if (ns4) eval("document.layers." + pNomCapa + ".visibility = 'hidden'");
    if (ie) eval("document.all." + pNomCapa + ".style.visibility = 'hidden'");
    if (ns6 && !ie) eval("document.getElementById(' " + pNomCapa + " ').style.
                                                                                               visibility = 'hidden' ");
  }
  function veure()
  {
    capaOFF("capa1");
    capaOFF("capa2");
    capaOFF("capa3");
    capaOFF("botoactplanol");
    capaON("planol");
  }
  function ocultar()
  {
    capaON("capa1");
    capaON("capa2");
    capaON("capa3");
    capaON("botoactplanol");
    capaOFF("planol");
  }
</script>


Afegir dins el bloc <body>:

...
<div id="planol">
  <center><img src="planol.jpg">
  <form>
    <input type="button" value="Ocultar plànol" onClick="ocultar();">
  </form></center>
</div>
...
<div id="botoactplanol">
  <form>
    <input type="button" value="Veure plànol" onClick="veure();">
  </form>
</div>
...