Aunque el HTML dinámico parece dinámico, de hecho, toda la Web sigue siendo casi estática. Por supuesto, algunos de los sitios web más vanguardistas han tenido contenido interactivo durante algún tiempo, pero la mayoría de ellos todavía se implementan mediante complementos o escribiendo varias páginas para diferentes versiones de navegadores. Para la mayoría de los productores de páginas web, incluso si quieren escribir varias versiones de una página, les resulta difícil tener tiempo. Además, las páginas web que pueden lograr efectos interactivos generalmente requieren un gran ancho de banda. Autor y espectador. Sin embargo, no tiene por qué ser así. Aquí, puede aprender una forma rápida y sencilla de agregar efectos DHTML a páginas web en condiciones de poco ancho de banda. Este es el método de pasar el mouse por encima. Este método no requiere cargar ninguna imagen ni escribir varias páginas.
Mejor información de captura del mouse
Mouseover es uno de los métodos dinámicos más utilizados y efectivos en la Web, y una buena razón es que permite al espectador obtener comentarios claros y directos. Piénselo así: mueva el mouse sobre un enlace de hipertexto y el enlace se resaltará, cambiará de color o cambiará para decir "¡Soy un enlace!".
Esto no significa que todos los enlaces creados al pasar el mouse sean iguales. Son diferentes. La peor situación es que los enlaces al pasar el mouse se implementan en lenguaje Java o en formatos especiales, como el formato Shockwave de Macromedia, que requiere que el espectador instale un complemento para ver el efecto. El mejor de los casos es que los enlaces al pasar el mouse estén escritos en JavaScript compatible con todos los navegadores. Pero incluso si se implementa con JavaScript, aún requiere que el navegador cargue dos imágenes, una para alto brillo y otra para visualización normal, lo cual es un desperdicio de uso del ancho de banda.
Ahora veamos DHTML, que crea enlaces al pasar el mouse sin cargar ninguna imagen. Lo único que hay que tener en cuenta es que el navegador debe abrir el código DHTML para abrir los objetos de la página web, como enlaces y estilos, para que puedan ser descritos por el modelo de objetos de documento (DOM). En otras palabras, el código actualmente sólo funciona en Internet Explorer 4.0. Sin embargo, el navegador de quinta generación de Netscape (que se espera que se lance a finales de este año) será totalmente compatible con DOM. Además, no se preocupe si se utilizan enlaces al pasar el mouse en navegadores incompatibles; los navegadores que no admiten el código DHTML en la página simplemente los ignorarán. (Para obtener más detalles, consulte la sección "Deje que el DOM funcione en su sitio web" más adelante).
Las páginas web ordinariasde código
se dividen en dos áreas principales: una es el área de contenido y la otra es el área de navegación. Los enlaces al pasar el mouse generalmente aparecen en el área de navegación. Normalmente, los botones resaltados se utilizan para dirigir a los visitantes a diferentes áreas del sitio, como gráficos del sitio o páginas de comentarios. En lugar de usar botones, vamos a convertir enlaces de texto ordinarios en enlaces interactivos con el mouse. El método es: primero inserte enlaces de texto ordinarios en el documento, como por ejemplo:
< a href="contact_us.html">
Contáctenos</a>.
El segundo paso cambia el color del enlace de texto cuando el mouse se mueve sobre él. El programa de script DHTML es el siguiente:
function rollon(){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement
style.color = "red";}
}
function rolloff(){.
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover =
document.onmouseout
= rolloff;
<En medio de la etiqueta script>, insértela en el <head> de la página web y podrá lograr inmediatamente el efecto de pasar el mouse sobre cada enlace de texto. A continuación analizamos detalladamente cómo se consigue esto.
El programa de script escrito anteriormente define dos funciones clave: rollon (activada cuando el mouse se mueve sobre el enlace) y rolloff (activada cuando el mouse se aleja del enlace). Cada función comienza con una simple declaración 'if', lo que significa: cada vez que se llama al evento onmouseover en el documento web, la función rollon notificará al navegador para determinar si el objeto que activa el evento es una etiqueta Anchor (window.event). srcElement.tagName == "A"). Si es así, el script aplicará un estilo especial (rojo en este caso) al enlace. De manera similar, cuando ocurre el evento onmouseout, la función rolloff devolverá el estilo a su color predeterminado (color="").
Las dos últimas líneas de este script notifican al navegador que ejecute la función rollon cuando ocurra el evento onmouseover y que desactive la función de enlace del mouseover (mouseover) cuando ocurra el evento onmouseout.
Obtenga el doble de resultado con la mitad del esfuerzo
Internet Explorer 4.0 le permite usar DHTML para controlar cada objeto en el documento. Naturalmente, puede lograr más funciones además de cambiar el color de la etiqueta Anchor. De hecho, puede aplicar cualquier elemento de las hojas de estilo en cascada (CSS, una especificación de formato estándar del W3C) a cualquier tipo de objeto o componente de recurso. Por ejemplo, además de hacer que un enlace aparezca en rojo, también puede agregarle o quitarle subrayado.
Para eliminar el subrayado, simplemente inserte el siguiente atributo de estilo en todas las etiquetas de anclaje de la página:
style = "text-decoration: none"
Esta declaración eliminará el subrayado del enlace, haciéndolo aparecer en estado normal o predeterminado. (De forma predeterminada, Internet Explorer 4.0 y Navigator 4.0 subrayan todos los enlaces de texto. La declaración anterior cambiará el estado predeterminado de estos enlaces uno por uno).
Luego, agregue la siguiente declaración debajo de la función rollon:
window.event.style.
textDecoration = "underline";
Ahora, el recurso para el evento de mouseover que definiste se volverá rojo y tendrá un estilo de subrayado. Cabe señalar que el subrayado se puede eliminar agregando la siguiente declaración a la función de rolloff:
window.event.srcElement.style.
textDecoration = "none"
Las funciones de modificación anteriores que se pueden implementar rápidamente muestran el poder de un DHTML simple; programa de script. No requiere cargar ninguna imagen, pero utiliza un código altamente flexible y portátil para producir efectos visuales llamativos. Puedo decir que puedes usarlo para acceder a cualquier documento, incluso en navegadores más antiguos. Si desea obtener este código y dominarlo usted mismo, visite nuestro sitio web: www.windowspro.com .
-------------------
Edward Grossman es el productor del sitio web www.windowspro.com . Tiene un doctorado en filosofía y se dedica a la investigación en el campo de. Filosofía antes de la aparición de la Web. Su correo electrónico: [email protected]
Simplemente agregue unas 15 líneas de código al ①encabezado del documento y podrá convertir ②enlaces de texto normal en cualquier página web en ③enlaces interactivos activados por el mouse (mouseover).
------------
Haga que DOM funcione en su sitio web.
Con HTML dinámico (DHTML), la programación orientada a objetos ya no es algo que sólo los expertos en programación pueden hacer, se está convirtiendo en un área que incluso los experimentados en la web pueden hacer. los creadores de páginas pueden participar. Esto se debe en gran medida al modelo de objetos de documento o DOM. Esta especificación del W3C trata cada componente de un documento como un objeto, ya sea un documento, un estilo o un enlace. Los scripts pueden modificar estos objetos según la entrada del usuario, el tipo de navegador o muchas otras variables, incluido cambiar el tamaño, cambiar el estilo o actualizar el enlace.
DOM puede abrir un documento completo, lo que permite a los autores web crear páginas interactivas altamente personalizables sin imponer una gran sobrecarga de descarga a los usuarios. Esto no solo permite enlaces con el mouse sobre un ancho de banda bajo, sino que también permite menús de navegación web plegables y componentes de página móviles (como imágenes, bloques de texto, etc.).
Para obtener más información sobre DOM, visite los sitios: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ y desarrollador.netscape.com/docs/manuals/communicator/dynhtml/.
Para ver ejemplos de aplicaciones DHTML, visite: www.windowspro.com y www.projectcool.com (intente arrastrar Saturn) y busque "Ver código fuente".
En IE 4.0, puedes usar HTML dinámico para operar docenas de objetos. Una lista detallada está disponible en www.microsoft.com .