DHTML: Ventanas y marcos Barra de desplazamiento (scrollbar) gráfica Compatibilidad: Ms Internet Explorer, Netscape Esta demo sorprende por el efecto gráfico que se produce. Es además de gran utilidad cuando se pretende adaptar la gráfica de un IFrame al aspecto cromático del sitio. El ejemplo utiliza sintaxis javascript e imágenes (contenidas dentro del zip), y hace gran uso de tablas HTML. También en este caso, como en la demo precedente, se invoca un archivo HTML externo denominado "testo.htm". Layer Crossbrowser Compatibilidad: Ms Internet Explorer, Netscape Útil y fácil de configurar, esta demo presenta una de las mayores ventajas de DHTML: la posibilidad de modificar el contenido de una página de modo dinámico y tras haber cargado la misma. Esta demo, además de por el archivo .htm, está compuesta por tres imágenes "TOP1.gif", "TOP2.gif" y "TOP3.gif" (todas presentes en el archivo zipado), que se visualizan según el layer que seleccionemos. Como es obvio, podemos sustituir las imágenes con texto y colocar los layer en cualquier punto de la página. Mover objetos de un marco a otro Compatibilidad: Ms Internet Explorer Esta demos, compatible sólo con MSIE, permite mover, arrastrando el ratón, una imagen o bloques de cabecera de un marco a otro. Para ello, es necesario utilizar los dos botones del ejemplo. Colocar elementos en un documento Compatibilidad: Ms Internet Explorer, Netscape Esta demo muestra cómo insertar elementos en cinco puntos absolutos de la página: en el centro y en los ángulos superior izquierdo, superior derecho, inferior derecho e inferior izquierdo Scroller vertical y automático Compatibilidad: Ms Internet Explorer, Netscape Esta demo hace que la página que se está visualizando vaya pasando automáticamente de arriba a abajo cuando se abre el documento Scroller horizontal y automático Compatibilidad: Ms Internet Explorer, Netscape Esta demo hace que la página que se está visualizando vaya pasando automáticamente de izquierda a derecha cuando se abre el documento. Finistra indipendente di dimensioni variabili Compatibilidad: Ms Internet Explorer, Netscape Haciendo clic en el enlace que figura en esta demo, se abre una pequeña ventana independiente que se agranda gradualmente hasta llegar a ocupar toda la pantalla. IFrame crossbrowser Compatibilidad: Ms Internet Explorer, Netscape Como ya sabes, Netscape no reconoce la marca IFrame, que permite crear marcos internos en la página. Esta demo pone fin a este límite de Netscape y permite visualizar perfectamente un marco tanto a Ns como a Msie. Ventana con un clic del ratón Compatibilidad: Ms Internet Explorer, Netscape Este demo visualiza, haciendo clic en un enlace de texto o imagen, una ventana del tamaño y color deseados cerca del enlace. El resultado que se obtiene con MSIE es aún más sugestivo, dado que se produce un efecto "fade" de la ventana, tanto cuando ésta aparece como cuando desaparece. Ventanas que se reducen y se agrandan Compatibilidad: Ms Internet Explorer Ésta demo permite esconder al inicio elementos de la páginas, para después visualizarlos cuando se hace clic en un enlace. La demo funciona sólo con MSIE4 o sucesivos y no con Netscape. Scroller de texto al paso del ratón Compatibilidad: Ms Internet Explorer, Netscape Excelente demo que genera una ventana independiente dentro del documento. Dicha ventana puede contener imágenes y texto que se deslizan al pasar el cursor del ratón por encima de las imágenes externas de la misma. Otro botón permite volver al punto superior de la ventana. ¡Prueba!. Visor de bloques de texto o imágenes Compatibilidad: Ms Internet Explorer, Netscape Otra excelente demo crossbrowser que crea una parte de documento independiente del resto dentro de la cual se visualizan imágenes o texto. No es necesario hacer clic en los enlaces sino tan sólo pasar por encima el ratón. Marco con "slide menu" Compatibilidad: Ms Internet Explorer, Netscape Con un notable efecto gráfico, esta demo permite crear una especie de ventana con las voces del menú, que, cuando vienen pulsadas, modifican dinámicamente el texto con un movimiento "slide". Marco "expande - restringe" Compatibilidad: Ms Internet Explorer, Netscape El color del fondo, la dimensión de la ventana y su colocación pueden ser, obviamente, modificados a placer. Asimismo, la parte de ventana visible en el momento cargar la página puede ser redimensionada modificando los parámetros: if (clipValues(block,'r')10) e clip:rect(0,10,200,0) Scrollbar e IFrame Compatibilidad: Ms Internet Explorer, Netscape Las nuevas recomendaciones de HTML 4.0 prevén la marca <IFrame> para crear ventanas independientes dentro de los documentos HTML. Dynamic HTML nos permite hacer que dichas ventanas sean todavía más bonitas y útiles. Esta demo muestra una página dentro de la cual hay una ventana. Dentro de dicha ventana se cargan los archivos: "text1.htm", "text2.htm" e "text3.htm", los cuales están presentes en el archivo zipado. Scroller automático de página Compatibilidad: Ms Internet Explorer Esta demo produce un efecto similar a los títulos de cierre de las películas, con la imagen que, nada más entrar, se desliza automáticamente hacia abajo dejando ver todo el contenido de la página para después volver a empezar desde el principio. Gestionar los marcos con DHTML Compatibilidad: Ms Internet Explorer Esta demo se refiere a un sitio dividido en tres marcos: uno está expandido y ocupa la mayor parte de la pantalla y los otros dos están comprimidos. Haciendo clic en estos últimos la situación se invierte y el marco grande se redimensiona. Visualización progresiva Compatibilidad: Ms Internet Explorer, Netscape Esta demo visualiza, desde el centro hacia afuera, una parte de página. Esta parte de página se esconde pulsando un botón "reset", con lo que se vuelve a la situación inicial. Visualización progresiva (dcha.-izqda.) Compatibilidad: Ms Internet Explorer, Netscape Demo muy similar a la precedente: la única diferencia es que la visualización se lleva a cabo desde los laterals derecho e izquierdo hacia el interior. Inclusión en la página de documento externo Compatibilidad: Ms Internet Explorer Esta demo muestra cómo las nuevas especificaciones de HTML 4 pueden mejorar el acercamiento de los elaboradores a problemas particulares. Hasta ahora no era posible incluir documentos externos en una página HTML más que con la marca IFrame, pero hoy, con esta demo, es posible. El archivo externo se llama data.htm.