Además del código estático que se especifica en nuestros documentos HTML, se pueden agregar scripts para que los documentos sean más animados y llamen la atención en puntos específicos como imágenes, enlaces y otros, de acuerdo a nuestras necesidades. Estos scripts son fragmentos de código de alguno de los siguientes lenguajes de programación:
JavaScript
Visual Basic Script
TCL
La forma de incluir estos scripts en el documento HTML es
utilizando el elemento <script>, especificando el
tipo de script (el lenguaje) en el atributo type, y dejando
en el contenido del elemento el código del script,
así:
Ejemplo 4.5. Estructura básica de un script de JavaScript insertado en un documento HTML
<script type="text/javascript"> // ... Código JavaScript ... </script>
Es común querer animar imágenes que agregamos a nuestro documento HTML para llamar la atención. Usualmente se cambia la apariencia de las imágenes utilizando algún efecto como una sombra, cambiando el color de fondo o las posiciones de los objetos en la imagen. Veamos un ejemplo:
Ejemplo 4.6. Animación en JavaScript para cambiar una imagen-enlace mientras se pasa el cursor sobre ella (Original de Dave Raggett)
<script type="text/javascript">
if (document.images) {
imagen1 = new Image;
imagen2 = new Image;
imagen1.src = "../images/enter1.gif";
imagen2.src = "../images/enter2.gif";
}
function cambiarImagen(nombre, imagen) {
if (document.images) {
document[nombre].src = eval(imagen + ".src");
}
}
</script>
...
<a href="#" onMouseOver='javascript:cambiarImagen("enter", "imagen2")'
onMouseOut='javascript:cambiarImagen("enter", "imagen1")'>
<img name="enter" src="../images/enter1.gif" alt="Enter if you dare!" />
</a>
Existen diferentes clases de eventos que se pueden utilizar para animar los objetos (imágenes especialmente) en nuestros documentos. Estos eventos están presentes como atributos de las etiquetas que permiten ejecutar scripts como el del ejemplo anterior. Para este caso solamente se estudiaron los eventos de ubicar el cursor del ratón sobre el enlace (la imagen) y retirarlo luego.
El resultado del ejemplo anterior se puede comprobar en este enlace.
Los banners en Internet hacen referencia a imágenes al interior de las páginas HTML relacionadas con patrocinadores, páginas "amigas" o "hermanas", colocadas de tal forma que llamen la atención de los visitantes y al hacer clic sobre ellos sean dirigidos hacia dicho patrocinador. Estos banners se pueden ubicar como avisos dinámicos, de forma que utilizando una misma ubicación en la página, se muestren diferentes imágenes, y con cada imagen se enlace a sitios diferentes. A continuación se presenta un ejemplo con 3 imágenes diferentes y 3 enlaces asociados:
Ejemplo 4.7. Animación en JavaScript para mostrar avisos diferentes para enlaces diferentes (Original de Dave Raggett)
<html>
<head>
<title>Ejemplo</title>
<script type="text/javascript">
if (document.images) {
imagenes = new Array("../images/batman.jpg",
"../images/superman.jpg", "../images/flash.jpg");
direcciones = new Array("www.batman.com",
"www.superman.com", "www.flash.com");
cuenta = 0;
}
function rotarAviso() {
if (document.images) {
if (document.mi_aviso.complete) {
if (++cuenta == imagenes.length)
cuenta = 0;
document.mi_aviso.src = imagenes[cuenta];
}
}
// Cambiar el aviso cada 3 segundos
setTimeout("rotarAviso()", 3000);
}
function enlazarConAviso() {
document.location.href = "http://" + direcciones[cuenta];
}
</script>
</head>
<body onload="rotarAviso()">
...
<a href="javascript:enlazarConAviso()">
<img name="mi_aviso" src="../images/batman.jpg" border="0"
alt="Mis superhéroes favoritos">
</a>
</body>
</html>
El resultado de este ejemplo se puede observar en este enlace. En el capítulo 8 se estará evaluando la forma de crear scripts con JavaScript con más profundidad.