Taller de JavaScript en 5 días: Imágenes Cambiantes

Taller de JavaScript en 5 días: Imágenes Cambiantes (Rollover Scripts)

Introducción:

JavaScript es un lenguaje sencillo de guiones o "scripts" orientado a objetos, complemento ideal del HTML, para dinamizar nuestras páginas Web. Para incluir instrucciones de JavaScript dentro de una página Web podemos utilizar la instrucción <Script> para insertar una función o un conjunto de instrucciones.

Una de las principales funciones de JavaScript es permitirnos un mayor control sobre las páginas Web. Esto es posible gracias a los eventos. Un evento es una reacción que se produce normalmente, como respuesta a una acción (Click, Select, MouseOver) del usuario sobre alguno de los objetos de la página. Los controles de eventos se insertan como cláusulas dentro de una instrucción HTML. Damos por sentado que para incorporar estos Scripts están familiarizados con el código HTML.

Día 1: Mensaje en la Barra de Estado.

Descarga el Archivo1.html de Aquí.

Abre el Archivo1.html en tu Navegador. Al pasar el puntero del mouse sobre los botones de la Barra de herramientas, puedes observar el mensaje que se despliega en la Barra de Estado.

Abre el Editor Html que uses habitualmente o el Bloc de Notas de Windows y observa el código del Archivo1.html.

Este es un documento HTML estándar con la excepción de la marca HREF que direcciona el link con el código "javascript:void(0)" , a ningún sitio, o sea salta en el vacío pero sin ocasionar un error. Esto nos sirve en los ejercicios para probar código. Ustedes en el código definitivo vincularán el link a la URL correspondiente.

A continuación determinamos el evento onMouseOver y su correspondiente acción: muestra en la barra de estado el mensaje deseado. Luego determinamos la imagen de origen deseada. Nuestro código queda entonces así para cada botón:

<A HREF="javascript:void(0)"

onMouseOver="window.status='Esta es nuestra Página Web'; return true">

Actividad propuesta: Prueba rehacer el ejercicio cambiando los mensajes de la Barra de estado de acuerdo a tu gusto. Cualquier consulta o duda será bien recibida en [email protected]

Día 2: Dos imágenes posibles para un mismo Botón.

Descarga el Archivo2.html de Aquí.

Abre el Archivo2.html en el navegador. Cuando pases el puntero del mouse, sobre uno de los botones de la Barra de herramientas, aparecen distintos mensajes en la Barra de estado del Navegador (como en el ejercicio del Día 1) pero además la imagen del botón cambia. Hoy vamos a ver como cambiar estas imágenes cuando el puntero del mouse pasa por encima de los botones.

Abre en el editor de Html que uses habitualmente o el Bloc de Notas el Archivo2.html y observa el código. ¿Qué es lo que ocurre con este código? Si el navegador soporta el objeto de Image de JavaScript entonces que cargue en memoria las imágenes, sino que las deje vacías. El código es el siguiente:

if (document.images)

{

// browser supports Image object, so preload all images

home = new Image()

home.src = "home.gif" // unlit HOME image

home_on = new Image()

home_on.src = "home_on.gif" // lit HOME image

info = new Image()

info.src = "info.gif" // unlit INFO image

info_on = new Image()

info_on.src = "info_on.gif" // lit INFO image

store = new Image()

store.src = "store.gif" // unlit STORE image

store_on = new Image()

store_on.src = "store_on.gif" // lit STORE image

link = new Image()

link.src = "link.gif" // unlit LINKS image

link_on = new Image()

link_on.src = "link_on.gif" // lit LINKS image

cont = new Image()

cont.src = "cont.gif" // unlit CONTACT image

cont_on = new Image()

cont_on.src = "cont_on.gif" // list CONTACT image

}

else

{

// browser does NOT support Image object, so set all image vals to ""

// to prevent errors from arising in onMouseOver/onMouseOut handlers

home = ""; home_on = ""

info = ""; info_on = ""

store = ""; store_on = ""

link = ""; link_on = ""

cont = ""; cont_on = ""

document.homeImg = ""; document.infoImg = "";

document.storeImg = ""; document.linkImg = ""; document.contImg = ""

}

Ahora debemos programar los eventos onMouseOver y onMouseOut o sea cuando pasamos el puntero del mouse sobre el control y cuando lo retiramos. Para que de acuerdo al evento cargue una imagen u otra. Y haga este efecto de animación casi instantáneo. Esto lo codificamos para cada botón.

<A HREF="javascript:void(0)"

onMouseOver="document.homeImg.src=home_on.src;

window.status='Esta es nuestra Página Web'; return true"

onMouseOut="document.homeImg.src=home.src">

Actividad propuesta: Crea con un editor de imágenes tus propios botones y prueba cambiarlos a tu gusto, cualquier duda o consulta será bien recibida en: [email protected].

Día 3: Tres imágenes posibles para un Botón.

Descarga el Archivo3.html de Aquí.

Abre el Archivo3.html en el navegador. Al pasar el puntero del mouse sobre uno cualquiera de los botones su imagen cambia (ejercicio del Día 2). Pero si hacemos Click sobre el botón este cambia a una tercera imagen hasta que retiramos el puntero del mouse. Repetimos el código de los días anteriores, para modificar la Barra de estado y cambiar entre dos imágenes, de acuerdo al evento que ejecutamos, si es onMouseOver u onMouseOut. Y agregamos el siguiente código que incluya el evento onClick y mostrar una tercera imagen.

<A HREF="javascript:void(0)"

onMouseOver="document.homeImg.src=home_on.src;

window.status='Esta es nuestra Página Web'; return true"

onMouseOut="document.homeImg.src=home.src"

onClick="document.homeImg.src=home_sel.src;

window.status='Me hiciste Click'; return false">

No debemos olvidarnos incluir la declaración de esta nueva imagen en la parte general donde declaramos todas las imágenes.

Actividad propuesta: Crea tus propios botones con tres imágenes distintas de igual medida.

Día 4: Aparece una Imagen al pasar el puntero del Mouse sobre un Botón. (Pop-Up Rollovers).

Descarga el Archivo4.html de Aquí.

Abre el Archivo4.html en el navegador. Al pasar el puntero del mouse sobre un Botón se vuelve visible una imagen que hace una descripción complementaria del Botón. Aquí usamos un juego de imágenes, a partir de una imagen blanca, vacía cargamos otra imagen al activar el puntero del mouse y la volvemos blanca al desactivarlo. El código para uno de los botones:

<A HREF="javascript:void(0)"

onMouseOver="document.homeImg.src=home_on.src;

document.popupImg.src=pu_home.src;

window.status='Página Web'; return true"

onMouseOut="document.homeImg.src=home.src;

document.popupImg.src=pu_blank.src;">

No debemos olvidarnos declarar estas nuevas imágenes en la parte general junto con las otras imágenes.

Actividad propuesta: Diseña tu propia imagen remota o texto y que se vuelva visible frente a un evento disparador.

Día 5: Mapa de una imagen.Respuestas distintas según sus partes.

Descarga el Archivo5.html de Aquí.

Abre el Archivo5.html en el navegador. Al pasar el mouse sobre las distintas partes de la Imagen poligonal, se despliegan distintos mensajes en la Barra de estado y Se vuelve visible una imagen de descripción como en el ejercicio del Día 4.

Abre el Archivo5.html en el Bloc de Notas y observa el código. Tenemos varias cosas nuevas. Primero: un tag llamado Map que nos define una superficie de una figura poligonal, para luego determinar las distintas áreas o partes de esta figura debemos ingresar las coordenadas correspondientes a la tag Area definida como Shape y los eventos asociados a las mismas. El código para el botón Home es:

<AREA SHAPE="poly" COORDS="160,141,83,272,236,273"

HREF="javascript:void(0)"

onMouseOver="document.popupImg.src=pu_home.src;

window.status='Nuestra página Web'; return true"

onMouseOut="document.popupImg.src=pu_blank.src">

Luego repetimos el código para los otros botones cambiando las imágenes y no nos olvidemos de ingresar la declaración de las mismas en el encabezado.

Actividad propuesta: trate de crear su propia imagen o elija una de su agrado, para luego fraccionarla de acuerdo a las coordenadas necesarias y que responda al paso del puntero del mouse. Cualquier duda o comentario será bien recibido en [email protected]

Lic. Mirta Echeverría
[email protected]