HTMLpointHTMLpoint HTMLpoint.com


 DHTML: Ventanas y marcos

  • Barra de desplazamiento (scrollbar) gráficaDemo TOP
    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 CrossbrowserDemo TOP
    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áticoDemo TOP
    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áticoDemo TOP
    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 crossbrowserDemo TOP
    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ónDemo TOP
    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ágenesDemo TOP
    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"Demo TOP
    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 IFrameDemo TOP
    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 DHTMLDemo TOP
    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 progresivaDemo TOP
    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.
  Vuelve a principio de página