-
Cómo hacer un cambio de imagen en mouseover
-
Ya sea que esté creando o personalizando, imágenes mouseover pueden añadir un toque especial y una calidad "mágica" de su sitio web. La adición de la capacidad de hacer el cambio de imágenes colocando el cursor sobre ellos con el ratón del ordenador no es demasiado tiempo, pero sí requiere un poco de código personalizado. La implementación por encima del ratón (o vuelco) imágenes utiliza HTML simple y códigos de JavaScript - ambos de los cuales son la codificación de ordenador lenguajes universales, fáciles de implementar en cualquier página web.Instrucciones
1 Abra la página HTML que desea añadir el vuelco imagen (o por encima del ratón) en, usando un editor HTML o texto válido.
2 Pegue el siguiente código en su página HTML (dentro de las etiquetas <body> </ body> del código de la página):
"<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 Sube las imágenes que desea utilizar con su transferencia de imágenes (se requieren dos) para el anfitrión de su sitio web o imagen a un host gratuito, como Imgur (imgur.com), Imagen Shack (imageshack.us) o Photobucket (photobucket.com) .
4 Localizar el lugar en el archivo de su página en la que le gustaría tener su reinversión imagen aparezca y copiar y pegar (pulsando la tecla "CTRL", "C" simultáneamente en el teclado del ordenador para copiar y "CTRL", "V" para pegar) el código siguiente:
"<A
HREF="TARGETLINK.html"onMouseOver = "rollover ( 'NAMEOFROLLOVER')"
onMouseOut = "despliegue ( 'NAMEOFROLLOVER')"
> & Lt; IMG
SRC = "YOURFIRSTIMAGEURL"
NAME = "NAMEOFROLLOVER"
ALT = "texto alternativo" BORDER = 0
ALTURA ANCHO = 150 = 150
> & Lt; / a>
<Script type = "text / javascript">
<! -
setrollover ( "ROLLOVERIMAGEURL");
// ->
</ Script> "
5 Cambiar las variables en el código para satisfacer sus imágenes y enlaces web.
6 Reemplazar "TARGETLINK.html" con el sitio web o página de la imagen de sustitución será el vínculo. Dar la imagen de sustitución de un nombre específico y reemplazar "NAMEOFROLLOVER" con el nombre que elija. Reemplazar "YOURFIRSTIMAGEURL" con la URL de la imagen de la foto que desea visible antes de la renovación del ratón. Cambio "ROLLOVERIMAGEURL" a la imagen después de un ratón de ordenador se sitúa la imagen. Editar la altura y la anchura de la imagen cambiando "150" con la cantidad adecuada de píxeles La fotografía está.
7 Guarde la página HTML y volver a subirlo al servidor de su sitio web.
Consejos y advertencias
- Visita sitios web HTML tutorial gratis en línea para aprender trucos HTML adicionales en transferencias de imagen, los botones y los hipervínculos. Algunos sitios web conocidos como Escuelas W3 (w3schools.org) Eco Eco (echoecho.com), y Curandero It (quackit.com) incluyen grandes directorios de varios tipos de tutoriales de programación de Internet.
