Manuales
HTML básico
HTML 2ª. y CSS
Propiedades CSS
Javascript
Applets Java
CGIs

 
dHTML
Introducción
Cambiar formato
Mover capas
Mover con teclado
Visibilidad
Mover con el ratón
 
JavaScript
Barra de estado
Botones y menús
Validar formular.
Passwords
Abrir ventanas
Cargar frames
Volver atrás
Alertas
Ver navegador
Cargar imágenes
 
Creación de páginas web
© Paco Cascón Soriano
(diseño del índice tomado de la espléndida página jsworld.com)

HTML Dinámico

Es difícil definir y ponerse de acuerdo en qué es el DHTML (HTML dinámico). No obstante aquí nos referiremos a él como todo aquello que da dinamismo a nuestras páginas y que permite modificarlas una vez cargadas.

Como viene siendo habitual también en el DHTML los dos principales navegadores se comportan de formas diferentes. En estas páginas utilizaremos scripts que sean compatibles para ambos o introduciremos órdenes para uno y otro. La forma de conseguir una mayor compatibilidad será utilizar, por un lado las hojas de estilo (CSS) y, por otro, lenguajes como JavaScript (u otros menos usados como VScript o ActiveX). También, según el navegador, hay directivas HTML específicas para el DHTML.

En el caso de las hojas de estilo ya hemos comentado su forma de usarlas y sus propiedades en los dos primeros tutoriales. Pero en lo que se refiere a DHTML precisaremos de otras opciones no comentadas, que son las que nos permiten crear capas, para luego, con los lenguajes mencionados, poder moverlas, posicionarlas, ocultarlas y mostrarlas, etc.

La forma de usarlas será definiendo en los estilos del documento una nueva directiva por cada capa y asignándole las propiedades que comentaremos a continuación: (al menos habrá que definir el tipo)


Propiedades de
posicionamiento de capas con las hojas de estilo


Tipo de posición de la capa

Sintáxis: position: valor
Posibles valores: absolute | relative
Ejemplo:
#capa1 {position: absolute}

El posicionamiento absoluto toma como referente el vértice superior izquierdo de la página, mientras que el relativo tomará como origen justo el elemento anterior a este.


Tamaño de la capa

Sintáxis: width | height: valor
Posibles valores: longitud | porcentaje
Ejemplo:
#capa1 {position: absolute; width:80px;height:100px}

Posición de la capa

Sintáxis: top | left: valor
Posibles valores: longitud | porcentaje
Ejemplo:
#capa1 {position: absolute; top:50px; left:150px }

Exceso

Sintáxis: overflow: valor
Posibles valores: none | scroll | clip
Ejemplo:
#capa1 {position: absolute; top:50px; left:150px;overflow:clip }

Recorte de la capa (si overflow es clip)

Sintáxis: clip: rect(arriba derecha abajo izquierda)
Posibles valores: longitud
Ejemplo:
#capa1 {position: absolute; top:50px;
 left:150px;overflow:clip;clip:rect(10px 15px 15px 15px }

La primera y la última cifra especifican la posición de inicio (vértice superior-izquierdo) del rectángulo de recorte. La segunda y tercera cifra, definen lo que se verá horizontal y verticalmente, respectivamente, a partir del vértice definido por las otras 2 cifras.


Orden de las capas

Sintáxis: z-index: valor
Posibles valores: número
Ejemplo:
#capa1 {position: absolute; top:50px;
 left:150px;z-index:5 }

Cuanto mayor es el número más arriba está la capa en el que caso de que haya varias superpuestas. También se admiten números negativos.


Visibilidad de la capa

Sintáxis: visibility: valor
Posibles valores: visible | hidden
Ejemplo:
#capa1 {position: absolute; top:50px;
 left:150px; width=100;height:100;visibility:hidden }

A continuación un ejemplo que pone en practica varias capas en diferentes sitios, incluso montadas, así como recorte de imágenes..