Una imagen de sustitución, a menudo denominado simplemente como un vuelco, es un elemento en una página web interactiva que añade la llamarada. Cuando un visitante de la web pasa su cursor del ratón una imagen de sustitución, la imagen cambia de nuevo. Esto permite a los diseñadores web para proporcionar pistas visuales de navegación al hacer botones seleccionables cambian de color cuando moused terminado. Las imágenes de sustitución también crean una sensación de movimiento y la acción en una página web de otro modo estático.
Instrucciones
1 Crear dos imágenes del mismo tamaño. La primera imagen será la que se ven los visitantes cuando llegan por primera vez a la página web. Este es el "off" de la imagen, la imagen que se muestra cuando un visitante no está pasando el ratón sobre ella. La segunda imagen será el "sobre" la imagen, la imagen que aparece cuando alguien desplaza el ratón sobre la imagen, "off".
2 Agregue el siguiente código en el HTML de su página web. Este código hará que la acción del vuelco, el cambio de una imagen a otra. Abra el archivo HTML en el Bloc de notas o su editor de texto preferido e introduzca el código en el cuerpo del documento. Realizará ningún cambio en el código.
<Script type = "text / javascript">
<! -
// Copyright 1999 IDOC, Inc. http://www.idocs.com/tags/
// Distribuir este script libremente, pero por favor tenga esto
// Aviso con el código.
var rollOverArr = new Array ();
función setrollover (OverImgSrc, pageImageName)
{
si el retorno (document.images!);
si (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr [pageImageName] = new Object;
rollOverArr [pageImageName] = .overImg nueva imagen;
rollOverArr [pageImageName] = .overImg.src OverImgSrc;
}
la función de vuelco (pageImageName)
{
si el retorno (document.images!);
si el retorno (rollOverArr [pageImageName]!);
if (! rollOverArr [pageImageName] .outImg)
{
rollOverArr [pageImageName] = .outImg nueva imagen;
rollOverArr [pageImageName] = .outImg.src document.images [pageImageName] .src;
}
document.images [pageImageName] = .src rollOverArr [pageImageName] .overImg.src;
}
la función despliegue (pageImageName)
{
si el retorno (document.images!);
si el retorno (rollOverArr [pageImageName]!);
document.images [pageImageName] = .src rollOverArr [pageImageName] .outImg.src;
}
// ->
</ Script>
3 A continuación, añadir el código que indica el código de acción de la Etapa 2, que la imagen cambie. Antes de introducir el código en el cuerpo del documento HTML después de que el código de acción, cambie el único caso de "home_off.gif" al nombre de su imagen de "apagado". Cambie la única instancia de "home_over.gif" para el nombre de su "sobre" la imagen.
<A
HREF="rollover_target.html"
onMouseOver = "rollover (" casa ")"
onMouseOut = "despliegue (" casa ")"
> & Lt; IMG
SRC = "../ gráficos / home_off.gif"
NAME = "casa"
ALT = "Página" BORDER = 0
ALTURA ANCHO = 130 = 115
> & Lt; / a>
<Script type = "text / javascript">
<! -
setrollover ( "../ gráficos / home_over.gif");
// ->
</ Script>