1. Introducció
2. Demos:
1. Introducció
Aquest és el document que recull diverses demostracions en DHTML. Cada una d'aquestes demostracions va acompanyada d'una explicació de com han estat programades i de quines de les propietats CSS2 o dels aspectes de la programació en JavaScript s'estudia en cada cas.

Aquestes demostracions intenten sentar una base i ser un activador de la imaginació del programador d'HTML Dinàmic. Pretenen ser una aproximació pràctica a la programació de pàgines DHTML on el lector hi pugui trobar una eina d'orientació i de resolució de bona part dels seus possibles dubtes així com un camí a seguir per les seves pròpies demostracions.

Cal remarcar que els efectes que aquí es descriuen només fan referència al comportament observat davant la programació en JavaScript en els navegadors MSIE 4.0 i NS 4.03 per PC.



Demo   1.   Canvi de posició
És una demostració molt senzilla que mostra com canviar un element de posició dins la pantalla. En la pantalla apareixerà una ordre: "Clica'm!". Aquesta paraula es troba dins un element DIV i alhora dins un element A, el qual farà que quan s'activi el link es cridi una funció que desplaci l'element a un punt predeterminat de la pantalla.

Pas 1:
En el HEAD es defineix l'"id" de l'objecte, es situa en un lloc concret de la pantalla (propietats top i left) i es posiciona ("position: absolute").
Pas 2:
En el BODY es declara el DIV de l'objecte, amb una imatge com a contingut i un hiperlink que apunta a una funció JavaScript.
Pas 3:
Es crea una secció JavaScript en el BODY i s'hi fa la detecció d'objecte i es defineix una variable "cross-browser" que identificarà l'objecte que s'ha de moure.
Pas 4:
Es crea una secció JavaScript en el HEAD i s'hi defineix la funció JavaScript que s'executarà quan es faci clic sobre la imatge. En aquesta funció es modifiquen els valors de les propietats top i left de l'objecte.
Demo   2.   Posició aleatòria
És una continuació de la Demo1. En aquest cas, l'element es situarà cada cop en una posició aleatòria de la pantalla, i a més una finestra d'avís informarà de les coordenades de la seva posició actual. La funció utilitzada per generar les coordenades aleatòries és Math.random(), la qual genera un número aleatori entre 0 i 0.99. Per afitar les coordenades a una regió concreta de la finestra es multiplica el valor que genera la funció pel màxim de l'intèrval on es desitja que es trobin els números generats. El número decimal resultant es passa com a paràmetre a la funció Math.floor() la qual arrodoneix (no trunca) un número decimal a un número enter.

Pas 1:
En el HEAD es defineix l'"id" de l'objecte, es situa en un lloc concret de la pantalla (propietats top i left) i es posiciona ("position: absolute"). També se li ha especificat la propietat width amb un valor de 145px (aproximadament l'amplada del text que es desplaçarà), ja que si no se li especifica MSIE considera que l'amplada del DIV dins del qual situarem el text arriba fins al final de la pantalla, i això generaria un scroll horitzontal quan el text es situés en posicions acostades a aquest límit.
Pas 2:
En el BODY es declara el DIV de l'objecte, amb un text com a contingut i un hiperlink que apunta a una funció JavaScript.
Pas 3:
Es crea una secció JavaScript en el BODY dins de la qual es fa la detecció d'objecte i es defineix una variable "cross-browser" que identificarà l'objecte que s'ha de moure.
Pas 4:
Es crea una secció JavaScript en el HEAD i s'hi defineix la funció JavaScript que s'executarà quan es faci clic sobre el text. Aquesta funció modifica els valors de les propietats top i left de l'objecte segons el resultat de la operació matemàtica explicada més amunt.
Demo   3.   Posició desitjada per l'usuari
Apareix una imatge que, com en les demos anteriors, es troba dins un element DIV i alhora dins un element A. Quan es fa clic sobre la imatge es crida una funció que demana les coordenades x i y en les quals l'usuari vol situar la imatge. No hi ha cap filtre per afitar el rang de posicions possibles, per tant, la propietat position de la imatge està inicialitzada a "absolute" ja que si estigués inicialitzada a "relative" i volguéssim situar la imatge fora de l'àrea de visió de la finestra no es generaria cap mecanisme d'scroll i no la veuríem. Cal remarcar diverses coses:


Pas 1:
En el HEAD es defineix l'"id" de l'objecte, es situa en un lloc concret de la pantalla (propietats top i left) i es posiciona ("position: absolute"). També se li especifica la propietat width per la mateixa raó que s'ha comentat en l'anterior demo.
Pas 2:
En el BODY es declara el DIV de l'objecte, amb una imatge com a contingut i un hiperlink que apunta a una funció JavaScript.
Pas 3:
Es crea una secció JavaScript en el BODY dins de la qual es fa la detecció d'objecte i es defineix una variable "cross-browser" que identificarà l'objecte que s'ha de moure.
Pas 4:
Es crea una secció JavaScript en el HEAD i s'hi defineix la funció JavaScript que s'executarà quan es faci clic sobre la imatge. Aquesta funció fa sorgir uns missatges de prompt a la pantalla, els quals li demanen a l'usuari que entri les coordenades x i y on vol situar la imatge. A continuació situa la imatge en les coordenades entrades (assignant a les propietats top i left de l'objecte els nous valors) i seguidament emet un missatge informatiu (alert()) on indica en quines coordenades s'ha situat la imatge.
Demo   4.   Visibilitat + 'onmouseover'
Es juga amb la propietat "visibility" de CSS2 i amb l'event intrínsec "onmouseover" per què l'usuari no pugui mai clicar la paraula "NO". Quan es detecta que el ratolí s'acosta al "NO", automàticament aquest es torna invisible i un altre "NO" apareix desplaçat cap a l'esquerra. Aquest segon "NO" quan detecta que se li acosta el ratolí també desapareix i torna a aparèixer el primer "NO". I així indefinidament.

Pas 1:
En el HEAD es defineixen els "id"'s dels objectes de la pàgina. Aquests són tres: un objecte per al "SÍ", un per al "NO" de l'esquerra i un per al "NO" de la dreta (aquests dos últims objectes es trobaran visibles alternativament: quan un estigui visible l'altre no ho estarà). Es situen cada un dels objectes en el seu lloc concret de la pantalla (propietats top i left) i es posicionen ("position: absolute").

A l'"id" que correspon a l'objecte del "NO" de la dreta se li declara la propietat visibility i se li dóna el valor de "hidden", ja que inicialment aquest "NO" no serà visible, només serà visible el "NO" de l'esquerra. A més, a aquests dos "id"'s se'ls defineix la propietat width perquè els seus DIV's tinguin una llargada limitada. Si no es fes així, els DIV's dels dos "NO" arribarien fins al final de la línia i per tant tota aquesta àrea seria sensible a l'"onmouseover" (que després definirem per als dos objectes). És a dir, si passéssim el ratolí per sobre de qualsevol punt de la línia horitzontal que va des de cadascun dels "NO" fins al final de la pàgina s'executaria la funció associada a l'event "MOUSEOVER", i això només volem que passi quan el ratolí es situi just a sobre del text "NO".
Pas 2:
En el BODY es declaren els DIV's dels objectes, amb text com a contingut (un tindrà "SÍ" i els altres dos "NO"). En els objectes corresponents als "NO" s'hi afegeix l'atribut "onmouseover". Aquest atribut el necessita MSIE per reaccionar quan l'usuari passi el ratolí per sobre d'aquests objectes; l'atribut "onmouseover" apuntarà a la funció que cal que s'executi en aquestes circumstàncies.

És convenient que en els DIV's corresponents als "NO" s'hi especifiqui estil inline amb la propietat visibility, que és la que modificarem en l'script. Si no es fa així, el primer cop que es passa el ratolí per sobre del "NO" que inicialment es troba visible aquest no reacciona. Si no es vol especificar estil inline, en el pas 5 s'explica una alternativa.
Pas 3:
Es crea una secció JavaScript en el BODY dins de la qual es fa la detecció d'objecte i es defineixen dues variables "cross-browser" que identificaran els objectes corresponents als dos "NO", que són els objectes que seran manipulats per l'script. A més, com que aquesta demo utilitza la propietat visibility cal fer la distinció que duen a terme els dos navegadors respecte els valors d'aquesta propietat (definició de les variables cross-browser (en realitat se les podria anomenar constants cross-browser) VISIBLE i HIDDEN).
Pas 4:
Com que NS no reacciona a l'atribut "onmouseover" dels objectes cal fer la captura de l'event "MOUSEOVER" per als "NO": en l'element BODY s'hi afegeix l'atribut "onload", el qual apunta a una funció anomenada "init()". Així, en carregar-se aquesta pàgina s'executarà la funció "init()", que contindrà les captures de l'event.
Pas 5:
Es crea una secció JavaScript en el HEAD on s'hi defineixen les següents funcions:

Demo   5.   Canvi de posició + 'onmouseover'
La mateixa mecànica que la Demo4 però aquesta vegada enlloc d'utilitzar la propietat "visibility" es juga amb la posició del mateix element. És a dir, la paraula "NO", enlloc d'aparèixer i desaparèixer per mitjà de dos elements DIV, ara és el mateix element al qual se li canvia la posició quan detecta que se li acosta el ratolí.

Pas 1:
En el HEAD es defineixen els "id"'s dels objectes de la pàgina. Aquests són dos: un objecte per al "SÍ" i un per al "NO". Es situen cada un dels objectes en el seu lloc concret de la pantalla (propietats top i left) i es posicionen ("position: absolute").

A l'"id" corresponent al "NO" se li defineix la propietat width perquè el seu DIV tingui una llargada limitada. Si no es fes així, el DIV arribaria fins al final de la línia i per tant tota aquesta àrea seria sensible a l'"onmouseover" (que després definirem per a aquest objecte). És a dir, si passéssim el ratolí per sobre de qualsevol punt de la línia horitzontal que va des del "NO" fins al final de la pàgina s'executaria la funció associada a l'event "MOUSEOVER", i això només volem que passi quan el ratolí es situi just a sobre del text "NO".
Pas 2:
En el BODY es declaren els DIV's dels objectes, amb text com a contingut (un tindrà "SÍ" i l'atre "NO"). En l'objecte corresponent al "NO" s'hi afegeix l'atribut "onmouseover". Aquest atribut el necessita MSIE per reaccionar quan l'usuari passi el ratolí per sobre d'aquest objecte; l'atribut "onmouseover" apuntarà a la funció que cal que s'executi en aquestes circumstàncies.

És convenient que en el DIV corresponent al "NO" s'hi especifiqui estil inline amb la propietat left que és la que es modificarà en l'script. Si no es fa així, el primer cop que es passa el ratolí per sobre del "NO" aquest no reacciona. Si no es vol especificar estil inline, en el pas 5 s'explica una solució alternativa.
Pas 3:
Es crea una secció JavaScript en el BODY dins de la qual es fa la detecció d'objecte i es defineix una variable "cross-browser" que identificarà l'objecte corresponent al "NO", que és l'objecte que serà manipulat per l'script.
Pas 4:
Com que NS no reacciona a l'atribut "onmouseover" dels objectes cal fer la captura de l'event "MOUSEOVER" per al "NO": en l'element BODY s'hi afegeix l'atribut "onload", el qual apunta a una funció anomenada "init()". Així, en carregar-se aquesta pàgina s'executarà la funció "init()", que contindrà la captura de l'event.
Pas 5:
Es crea una secció JavaScript en el HEAD on s'hi defineixen les següents funcions:

  6.   Canvi de color + 'onmouseclick (només MSIE)
En la pantalla apareixerà un text de color blau el qual es troba dins un element DIV. Quan aquest element detecti que s'ha fet un clic a sobre seu, el text canviarà de color (llima). Cada cop que es faci un clic sobre aquest text anirà canviant del blau al llima i viceversa.

Aquesta demo només funciona per a MSIE ja que NS no pot accedir a la propietat color des del JavaScript.

Un altre cop ens trobem amb la disjuntiva de l'estil inline. L'especificació de la propietat color de l'objecte que conté el text que ha de canviar de color hi té un paper important en aquesta demo. Per una banda, si aquesta propietat només s'especifica en la definició de l'estil situada en el HEAD (dins l'element STYLE) el text triga dos clics en canviar de color el primer cop. Això és perquè el navegador al primer clic no té definit internament el color del text (encara que en la pantalla es veu de color blau) i no és fins al segon clic que l'expressió "document.all.id_DIV.style.color" o "document.all["id_DIV"].style.color" (o senzillament "id_DIV.style.color") té un valor definit ("blue"). Per altra banda, si l'especificació de la propietat color es troba dins l'atribut style del DIV (estil inline) que conté el text, el canvi de color es produeix ja en el primer clic.

Pas 1:
En el HEAD es defineix l'"id" de l'objecte de la pàgina que contindrà el text que ha de canviar de color. Es situa en un lloc concret de la pantalla (propietats top i left) i es posiciona ("position: absolute").

També se li especifica la propietat width per tal que el seu DIV tingui una llargada limitada. Si no es fes així, el DIV arribaria fins al final de la línia i per tant tota aquesta àrea seria sensible a l'"onclick" (que després definirem per a aquest objecte). És a dir, si cliquéssim sobre qualsevol punt de la línia horitzontal que va des del text fins al final de la pàgina s'executaria la funció associada a l'event "CLICK", i això només volem que passi quan es cliqui just a sobre del text.

Com a detall se li podria especificar la propietat cursor amb el valor "hand", que és el valor que entén MSIE per donar-li al cursor forma de mà. Així, cada cop que el cursor passi per sobre del DIV agafarà la forma de mà, com si hi hagués un link (a NS no es pot). Una altra manera d'assolir aquest efecte s'explica en el pas següent.
Pas 2:
En el BODY es declara el DIV de l'objecte, amb text com a contingut. En aquest DIV s'hi afegeix l'atribut "onclick". Aquest atribut el necessita MSIE per reaccionar quan l'usuari faci clic sobre d'aquest objecte; l'atribut "onclick" apuntarà a la funció que cal que s'executi en aquestes circumstàncies.

És convenient que en el DIV corresponent al text sensible s'hi especifiqui estil inline amb la propietat color que és la que es modificarà en l'script. Si no es fa així, el primer cop que es fa clic sobre el text sensible aquest no reacciona. En cas que es prefereixi no especificar estil inline, hi ha una solució alternativa que és definir una variable JavaScript amb el valor del color inicial del text i extreure la informació d'aquesta variable (solució anàloga a l'explicada en el pas 5 de les demos 4 i 5).

En referència al què s'apuntava en el pas anterior, la manera alternativa per introduir l'efecte del cursor en forma de mà i d'assolir la mateixa presentació és no utilitzar cap DIV sino un element A, d'aquesta manera:
   <br><br>
   <a id="id_a" style="color: blue" href="javascript:canviar()">
      Text sensible
   </a>
on id_a és és id_DIV però afegint-hi "text-decoration: none" al seu estil per tal que el text sensible no surti subratllat. O bé:
   <br><br>
   <a id="id_a" style="color: blue" href="#" onclick="canviar()">
      Text sensible
   </a>
o bé traient els <br><br> i englobar tot l'element A dins d'un DIV anònim.
Pas 3:
Es crea una secció JavaScript en el HEAD on s'hi defineix la funció que modificarà el color d'una part del text que apareixerà en la pantalla (text sensible) i que és el que es troba contingut en el DIV que hem definit en el pas anterior. Com que s'ha optat per especificar l'estil inline al qual es feia referència en el pas anterior, aquesta funció consulta directament el valor de la propietat color de l'objecte i en modifica el valor alternativament del blau al llima i viceversa.


Ja que aquesta demo no funciona per a NS no cal fer detecció d'objecte ni declaració de variables cross-browser.

Si aquesta demo constés de moltes funcions, a fi d'evitar-nos haver d'utilitzar cada vegada l'expressió "document.all.id_DIV.style.nom_propietat" o "document.all["id_DIV"].style.nom_propietat" (o senzillament "id_DIV.style.nom_propietat"), es podria definir una variable JavaScript que fos:
	var nom_objecte = document.all.id_DIV.style;
i així només caldria utilitzar l'expressió "nom_objecte.nom_propietat".
Demo   7.   Desplaçament d'un objecte
Aquesta demo introdueix una nova funcionalitat que s'utilitza molt sovint en les pàgines dinàmiques: el desplaçament d'objectes.

En la pantalla apareixerà una imatge la qual quan l'usuari cliqui sobre seu respondrà movent-se dibuixant un quadrat imaginari de 100x100 píxels. Cada vegada que es cliqui aquesta imatge, si està parada, es mourà d'aquesta manera. Si està en moviment i se li torna a clicar no reaccionarà.

Aquesta demo s'ha programat expressament d'una manera poc òptima a fi i a efecte de donar una visió més entenedora de com aconseguir que els objectes es desplacin per la pàgina en diferents direccions i sentits.

Pas 1:
En el HEAD es defineix l'"id" de l'objecte, es situa en un lloc concret de la pantalla (propietats top i left) i es posiciona ("position: absolute"). També se li defineix la propietat width amb la mateixa amplada que la imatge que estarà en moviment a fi que el DIV dins el qual la col·locarem no abarqui fins al final de la línia (la qual cosa a MSIE causaria scroll en moure horitzontalment l'objecte).
Pas 2:
En el BODY es declara el DIV de l'objecte, amb una imatge com a contingut i un link que apunta a una funció JavaScript.
Pas 3:
Es crea una secció JavaScript en el BODY on s'hi fa la detecció d'objecte i s'hi defineix una variable "cross-browser" que identificarà l'objecte que s'ha de moure.
Pas 4:
Es crea una secció JavaScript en el HEAD i s'hi defineix la funció JavaScript que s'executarà quan es faci clic sobre la imatge. En aquesta funció es fa el següent:


Les funcions que executen el moviment són recursives i utilitzen una variable global com a paràmetre per a cada crida recursiva. Aquestes funcions són:



Cal observar que si la funció principal (la que és cridada en primera instància quan s'efectua un clic sobre la imatge) cridés ella mateixa totes les altres funcions, enlloc de que cada funció cridi la que la segueix, donaria lloc a un mal funcionament de la demo. És a dir, si la funció principal tingués aquest codi (deixant a part el filtre de "en_mov"):
	moure_avall();
	moure_dreta();
	moure_amunt();
	moure_esquerra();
el resultat seria que s'executarien paral·lelament les quatre funcions.

D'altra banda, la funció de JavaScript setTimeout() és necessària en les funcions recursives que implementen els moviments ja que si només hi hagués una simple crida recursiva en cada funció (o bé un bucle for o while) aquesta s'executaria molt ràpid (al ritme en què l'ordinador fés els càlculs) i per tant, el resultat no seria un desplaçament paulatí sinó un canvi brusc de la posició de la imatge.
Demo   8.   Substitució dinàmica d'imatges (image swapping)
Aquesta és una tècnica que també és molt útil per la seva versatilitat. Es tracta de substituir una imatge per una altra (en la mateixa posició que l'anterior) en resposta a un event o bé simplement en esgotar-se un intèrval de temps determinat.

En aquesta demo apareixerà un número 1 enmig de la pantalla. Quan es passi el ratolí per sobre seu es transformarà en el número 2, i quan es passi el ratolí per sobre del 2 aquest es convertirà en el número 3. Això forma part d'un bucle infinit, i es repetirà sempre que es passi el ratolí per sobre del número que es visualitzi en cada moment.

Aquests números són imatges. En el document només hi ha un objecte, un DIV, i cada cop hi haurà una d'aquestes imatges dins del DIV. El quid (i el que diferencia aquesta tècnica de la simple tècnica de visualitzar/amagar imatges) és que les imatges es van turnant per a ser el contingut d'aquest DIV.

Com que en aquesta demo, encara que ha de funcionar per als dos navegadors, es pot utilitzar exactament el mateix codi per a tots dos (veieu el document "Programació en DHTML"), no cal fer una detecció d'objecte ni cap definició de variables cross-browser.

Pas 1:
Es declara en el HEAD, dins dels continguts de l'element <STYLE>, una classe que correspon a l'estil del DIV que contindrà les imatges (enlloc d'una classe també es podria haver especificat un "id"). Amb aquest mètode, el DIV no pot estar posicionat ja que si ho estés aquesta demo no funcionaria en cap dels dos navegadors. Per tant, en tenir la propietat position el valor "static" (el valor per defecte) cal utilitzar les propietats margin-top i margin-left, enlloc de top i left, per situar l'objecte (el DIV) en un lloc concret de la pàgina.
Pas 2:
En el cos es declara el DIV, la classe a la qual pertany. Aquest DIV se li especifica com a contingut la primera imatge de la sèrie d'imatges que més tard es visualitzaran per torns. Aquesta imatge està afectada per un element A amb l'atribut "onmouseover" apuntant a la funció JavaScript que realitzarà el swapping o substitucions.
Pas 3:
Es crea una secció JavaScript en el HEAD del document en la qual es defineix la funció que durà a terme la substitució de les imatges. Hi ha diverses maneres de fer aquestes substitucions i la que s'ha triat és la següent:

  1. Es defineixen tantes variables globals com el nombre d'imatges que es desitja que estiguin en el bucle de substitucions. En aquesta demo són 3: el número 1, el número 2 i el número 3. Aquestes variables tenen per valor el path relatiu de la localització de cada una de les imatges.
  2. La funció fa una simple transició de valors entre les variables que contenen les imatges, ajudada per una variable local temporal. Aleshores a l'expressió document.images.imatge.src se li assigna el valor d'una de les variables (que sempre és la mateixa, per això es fa la transició de valors) i d'aquesta manera se li assigna al DIV la imatge que serà el seu nou contingut.
Demo   9.   Una altra demo d'image swapping
Aquesta segona demo implementada amb la tècnica de la substitució d'imatges emula un àlbum de fotos. És a dir, es té la possibilitat d'anar passant un conjunt d'imatges endavant i endarrere, una a una. També s'hi afegeix la possibilitat de fer una ullada a totes les imatges de manera seqüencial.

En el centre de la pantalla hi apareix una imatge amb una fletxa a cada costat. La fletxa de l'esquerra és la que fa que les imatges retrocedeixin una a una (a cada clic) seguint una seqüència determinada; la fletxa de la dreta fa que les imatges avancin una a una a cada clic. Sota d'aquest conjunt hi ha un link que permet visualitzar totes les imatges seqüencialment.

Per facilitar aquesta tècnica a les imatges se'ls donen noms que continguin números consecutius, per ex., "imatge1.gif", "imatge2.gif", etc. Més endavant es veu la utilitat d'això.

Pas 1:
Es declara en el HEAD, dins dels continguts de l'element <STYLE>, l'estil de tots els objectes de la pàgina.
Pas 2:
En la secció JavaScript del BODY es fa la detecció d'objecte, la qual s'utilitzarà per a definir les variables cross-browser dels dos DIVs corresponents a les dues fletxes que fan de control de la visualització de les imatges.
Pas 3:
Dins el BODY es declaren els DIVs de les fletxes de control. Aquestes fletxes responen a l'event CLICK executant la funció de substitució de les imatges de l'"àlbum".

També es declara el DIV que contindrà les imatges d'aquest "àlbum".

Finalment es declara el DIV que conté un simple link que respon a l'event CLICK executant una funció que ens permetrà visionar seqüencialment d'una vegada totes les imatges.
Pas 4:
Es crea una secció JavaScript en el HEAD del document en la qual es defineixen les funcions.

La funció que du a terme la substitució de les imatges una per una i que és cridada per l'event CLICK quan es produeix sobre una de les dues fletxes (endavant/enrera) segueix aquest procediment:

  1. Rep un paràmetre on se li passa el sentit en el qual ha d'anar la visualització. És a dir, si s'ha clicat la fletxa de l'esquerra (la d'anar endarrera) se li ha passat un "-1", i si s'ha clicat la fletxa de la dreta (la d'anar endavant) se li passa un "1".
  2. Es suma el valor de la variable global que fa de comptador de les imatges (i que en aquest moment emmagatzema el número de la imatge que es troba visible) amb el valor del paràmetre rebut. Així se sap quina és la imatge que s'ha de visualitzar seguidament (és a dir, si el comptador valia 5 i el paràmetre val -1, aleshores s'ha de visualitzar la imatge 4).
  3. Fa un filtratge dels clics: si la imatge que s'està visualitzant en aquell moment (el moment de fer un clic en una de les dues fletxes) és la primera de totes i s'ha clicat la fletxa d'anar enrera, no fa res; si la imatge que s'està visualitzant en aquell moment és l'última de totes i s'ha clicat la fletxa d'anar endavant tampoc fa res.
  4. Si tot és correcte (queden imatges per visualitzar endavant o enrera) es fa la següent assignació utilitzant la funció eval() del JavaScript:
    eval("document.images.fotos.src = 'img/nume"+num_foto+".gif'");
    
    on fotos és el valor de l'atribut "name" de l'element IMG; img/nume és la ruta per arribar a la imatge i la primera part del seu nom (en aquesta demo, les imatges es diuen "nume1.gif", "nume2.gif", "nume3.gif", etc.); num_foto és la variable global que fa de comptador i que ara conté el número de la imatge que s'ha de visualitzar, el qual s'afegeix a la primera part del nom de la imatge (per ex., si num_foto val 4, el nom de la imatge és "nume4"); i .gif és l'extensió de cada una de les imatges.

Finalment, la funció que du a terme la visualització seqüencial de totes les imatges segueix aquest procediment:

  1. Reinicia a 1 una variable global (declarada fora de la funció, és clar) que servirà com a índex per a la visualització seqüencial. Aquesta variable global es reinicia en aquesta funció perquè així, cada vegada que es faci clic en el link per fer la visualització seqüencial aquesta es faci des del principi.
  2. Fa la crida a una funció recursiva que és la que durà a terme l'execució del bucle.
  3. La funció recursiva utilitza la variable global com a índex per anar mostrant seqüencialment totes les imatges de l'"àlbum". Igual que la funció explicada més amunt, aquesta utilitza també la funció eval() del JavaScript:
    eval("document.images.fotos.src = 'img/nume"+n_bucle+".gif'");
    
    on fotos és el valor de l'atribut "name" de l'element IMG; img/nume és la ruta per arribar a la imatge i la primera part del seu nom (en aquesta demo, les imatges es diuen "nume1.gif", "nume2.gif", "nume3.gif", etc.); n_bucle és la variable global que fa de comptador i que conté el número de la imatge que s'ha de visualitzar, el qual s'afegeix a la primera part del nom de la imatge (per ex., si n_bucle val 4, el nom de la imatge és "nume4"); i .gif és l'extensió de cada una de les imatges.


Aquesta demo és millorable perquè no s'ha tingut en compte que després d'una visualització seqüencial si es prem alguna fletxa s'executi la funció associada respecte l'última imatge de la seqüència; actualment el què fa és actuar respecte l'ordre en què s'havia deixat la seqüència abans de prémer el link.
Demo   10.   Moviment seguint funcions matemàtiques
Aquesta demo mostra una altra de les tècniques que es poden utilitzar per moure els objectes de la pantalla en funció d'una certa eqüació o fórmula matemàtica.

En aquest cas els objectes sotmesos a estudi es mouen en circumferència. Aquesta és una demo que representa una possible portada per a aquest Manual d'HTML Dinàmic. En la pantalla inicialment buida apareix desplaçant-se en direcció cap avall l'hipotètic "logo" del Manual. Un cop ha arribat a una posició centrada en la finestra, van apareixent pel costat dret d'aquest els links a les diferents seccions de què es composa el Manual. Aquests links roten al voltant del "logo" formant una circumferència. A més, en passar el ratolí per sobre de cadascun d'aquests links apareix sota d'aquest conjunt una breu explicació dels continguts de la secció corresponent.

Pas 1:
Es declara en el HEAD, dins dels continguts de l'element <STYLE>, l'estil de tots els objectes de la pàgina.
Pas 2:
En la secció JavaScript del BODY es fa la detecció d'objecte, es creen les variables cross-browser necessàries per fer referenciar els objectes i també les constants per als valors de la propietat visibility.
Pas 3:
En la declaració de l'element BODY es defineix l'atribut "onload" el qual fa una crida a la funció que farà que el "logo" apareixi inicialment desplaçant-se cap al centre de la pàgina.
Pas 4:
Dins el cos del document (en els continguts de l'element BODY) es declaren els DIVs dels objectes (el logo, els links de les seccions i les descripcions).

Els links de les seccions responen a l'event MOUSEOVER i també a l'event MOUSEOUT. Així quan el ratolí hi passa per sobre es mostra la descripció dels continguts de la secció corresponent, i quan el ratolí es retira la descripció desapareix.
Pas 5:
Es crea una secció JavaScript en el HEAD del document en la qual es declaren les diferents funcions que executaran els moviments dels objectes de la pàgina i també les variables globals que necessitaran. Entre aquestes variables globals s'hi troben les constants que emmagatzemen:



Les diferents funcions definides en aquesta secció JavaScript són:

Demo   11.   Emulació d'scroll
En aquesta demo es mostra una possible implementació per representar un text que es va visualitzant paulativament mitjançant un mètode d'emulació de dispositius d'scroll.

En el centre de la pantalla apareix una espècie de marc que a dins hi conté un fragment d'un text. Al costat dret d'aquest marc hi apareixen, disposades verticalment, dues fletxes que representen el sentit del desplegament del text (una en sentit cap amunt i l'altra en sentit cap avall). En passar el ratolí per sobre de cada una d'aquestes fletxes el text es va visualitzant en un sentit o l'altre tal com passa en una finestra normal d'un navegador.

Cal remarcar de quina manera s'han estructurat els objectes que componen merament el marc i el text:



Pas 1:
Es declara en el HEAD, dins dels continguts de l'element <STYLE>, l'estil de tots els objectes de la pàgina (veieu més amunt les consideracions sobre alguns dels objectes que conformen aquesta pàgina).
Pas 2:
En la secció JavaScript del BODY es fa la detecció d'objecte i es crea la variable cross-browser que identificarà la capa interna del text (només necessitarem fer referències a l'objecte corresponent a la capa del text). La definició d'aquesta variable cross-browser diferirà lleugerament de les que hem fet fins ara en les altres demos, ja que en tractar-se d'una capa que es troba dins d'una altra capa, NS necessita que se la referencïi així:
document.layers["nom_capa_global"].document["nom_capa_aniuada"]
A més, també es creen cinc variables globals que ens serviran per al control dels límits del moviment amunt i avall del text. NS i MSIE difereixen en la manera de comptar els píxels origen de la capa de text. Així que s'han hagut de fer diverses distincions de casos en aquestes variables.

En aquesta demo MSIE necessita que se li especifiqui amb estil inline el valor de la propietat top per a la capa interna del text. Però si fem això, aleshores per alguna raó la demo no funcionarà per a NS. Així que s'ha decidit cridar des d'aquesta secció JavaScript una funció que li digui a MSIE el valor inicial de la propietat top d'aquesta capa. S'ha preferit fer aquesta crida des d'aquesta secció ja que la seva execució es durà a terme abans que si l'haguéssim fet des de l'atribut onload de l'element BODY, i el que ens interessa és que el navegador tingui aquesta dada abans que pugui donar cap error.
Pas 3:
Es crea una secció JavaScript dins el HEAD del document i s'hi defineixen les funcions necessàries:

Demo   12.   Menús desplegables
Comentarem dos mètodes possibles per aconseguir un menú desplegable.

El primer consisteix simplement en fer aparèixer i desaparèixer una imatge (o llista de text amb links) en resposta a algun event d'un altre objecte. Si s'utilitza una imatge com a llista d'opcions del menú es farà un mapeig de la imatge per poder crear àrees sensibles de la imatge que actuaran com simples links. La següent demo mostra un menú desplegable implementat fent aparèixer i desaparèixer una llista text d'opcions en resposta a l'event MOUSEOVER quan es produeix sobre la barra del menú: DEMO.

El segon mètode consisteix en desplegar una imatge o una llista de text. El desplegament es fa gradualment, és a dir, el menú es va veient pas a pas, "desplegant-se". Aquest és el mètode que es pot veure si es fa clic en el botó DEMO. El menú desplegat és una imatge que té associat un mapa d'imatge a fi que les opcions siguin linkables. Visualitzeu-ne el codi per a veure els comentaris sobre la implementació d'aquesta demo.
Demo   13.   Arrossegar objectes
En aquesta demo es mostra com es pot fer que un objecte sigui arrossegat pel ratolí. Visualitzeu-ne el codi per a veure els comentaris sobre la implementació d'aquesta demo.
Demo   14.   Caixa tancada
Aquí es mostra un efecte que simula una caixa de parets invisibles dins la qual hi ha una pilota. La pilota es va movent per dins de la caixa però no en pot sortir sinó que va xocant amb les parets imaginàries que li impedeixen la sortida. Visualitzeu-ne el codi per a veure els comentaris sobre la implementació d'aquesta demo.
Demo   15.   Z-index i event de teclat
En aquesta demo es mostra un nou event que no s'ha vist fins ara: KEYPRESS. Es detecta si l'usuari ha premut una tecla determinada i segons la tecla que ha premut, es canvia el z-ordre dels elements de la pàgina. Visualitzeu-ne el codi per a veure els comentaris sobre la implementació d'aquesta demo.
Demo   16.   Una altra demo de funcions matemàtiques
És una variació de la demo núm. 10. El més significatiu és que se li ha modificat la funció que fa rotar els links o objectes i d'aquesta manera aquests només es mouen verticalment i es van creuant els uns als altres tot sobreposant-se. Visualitzeu-ne el codi per a veure els comentaris sobre la implementació d'aquesta demo.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències






















HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos