Roll sobre Ligas

Para éste tutorial, he creado un segundo sitio “Electro_GC_02” y están definidos en Dreamweaver, entonces, si quieres, puedes bajarlo.
Bien, ya he platicado como insertar una “roll sobre imagen” en una página lección 13.
Para añadir un roll sobre liga, puedes proceder de la misma forma o puedes usar una segunda.
Claro, aquí necesitamos por lo menos dos imágenes diferentes con las mismas dimensiones.
Primero coloca el curso en la locación de tu documento donde quieres instalar el roll sobre la liga y haz click the en el botón “Insert” de la barra de menu.

En la ventana de diálogo que aparece en la parte superior de la sección, da un nombre a tu imagen.
Esto es muy usado si quieremos después referirnos a ésta imagen para ejectar múltiples cambios.
En la segunda y tercera caja, puedes dar respectivamente el orginal y el roll sobre la imagen haciendo click en el botón “Buscar”, navega a la imagen y seleccionala.
Otra vez, dejemos el “Precargar Roll sobre Imagen” como verificado en su casilla.
Especificamente algún texto alternativo para los visitantesque tengan desactivado el botón “Mostrar Imagenes” en su navegador.

Y en la última caja, selecciona la página donde quieres hacer una liga, haciendo click en el botón “Buscar” y selecciona la página o da la dirección a otro sitio web.
Haz click en el botón Aceptar.

Repetir para todos los roll sobre ligas.
Observa el resultado en tu ventana de navegador, presionando la tecla F12 de tu teclado.
Cuando nos pregunte si quieres guardar los cambios, responde “Si”.
Intenta hacer roll sobre ligas mediante el cursor en este lugar.

Cambios múltiples en un roll sobre

Tenemos también la posibilidad de cambiar el color cuando pasemos sobre un botón.
En éste ejemplo, coloco una imagen en blanco bajo los botones “GPS”, “GSM” etc.
Cuando paso sobre un botón, movería la imagen del botón y la imagen en blanco cambia.

Continuamos con eso que he hecho en los ejercicios previos.
Añado los archivos de abajo a la carpeta “Botones” en el panel de Archivo:

1. una imagen en blanco,
2. una imagen GPS_info
3. una imagen GSM_info
4. una imagen HiFi_info
5. una imagen TV_info.

Todas tienen las mismas dimensiones.

 

Selecciona una imagen en blanco en el documento y da un nombre en la ventana de propiedades.
En éste ejemplo doy el nombre “blanco” y hago click en la tecla Enter del teclado para confirmar.

 

Selecciono el botón roll sobre “GPS” hecho en el menu previo.
Hago click en la flecha que apunta hacia abajo a un lado del panel “Etiqueta” en la ventana panel.
Elijo la pestaña “Comportamientos”.
En la lista puedes ver los dos primeros actos para el “GPS”.
Esos son comportamientos de JavaScript.
El primero restaura la conversión de la imagen y el segundo lo cambia por la imagen.
Haz doble click en el botón “Cambiar Imagen”.
Esto abre la ventana de diálogo otra vez de “Cambiar Imagen”.
Todas las imagenes que aparecen en el documento y que tengo dado un nombre, aparecen en ésta lista con su nombre. Y eso es lo importante del por qué dar un nombre a las imagenes.
Entonces tenemos las imagenes (léase botones) “GPS”, “MOBILE”, “Hi” y “TV”.
Y tenemos nuestra imagen “blanco”.
Selecciona la imagen “blanco”, porque ésta es la imagen donde queremos ver el cambio.
Aparte de la caja “Ajuste Source”, haz click en el botón “Buscar”, navega a la imagen en blanco en la que quieras ver el cambio.
Seleccionala y haz click en Aceptar.
Las dos opciones abajo “Precargar Imagenes” y “Restaura imagenes en MouseOut” deben de estar verificadas en sus casillas.
Haz click en el botón Aceptar otra vez.

Cuando estés viendo la página en el navegador (haz click en la tecla F12 de tu teclado), verás que tanto “GPS” y la imagen en blanco cambiarán cuando muevas el puntero sobre el botón “GPS”.

Si deseas cambiar varias imagenes cuando pases el mouse por encima en el botón de “GPS”, repite esas acciones.
¿Cuántas veces puedes repetir esto para un roll sobre imagen o botones? No lo se, sólo puedo decirte, “no le hagas al loco”.
Si deseas remover el Comportamiento del botón JavaScript, selecciona la imagen en el documento. Haz doble click en el botón “Cambiar Image” en el panel “Comportamientos”.
Selecciona la imagen que quieras cambiar el comportamiento en la ventana de diálogo.
Y elimina el texto en la caja “Ajustar Source”.
Haz click en el botón Aceptar.
Si deseas eliminar todo el comportamiento del botón de JavaScript, selecciona comportamientos en el panel “Comportamiento” y haz click en la tecla suprimir de tu teclado o presiona el signo menos en la parte superior del panel “Comportamiento”.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats