-
Cómo hacer un rollover emergente Imagen
-
Si está diseñando un sitio web, puede hacerlo más atractivo e interesante por la posibilidad de subir fotos o imágenes que transmiten el mensaje que desea enviar en el sitio. La publicación de imágenes de los sitios, sin embargo, por lo general significa la publicación de uno o dos grandes fotos en una sola página o la publicación de enlaces a páginas que se pueden abrir la página de la imagen.Hay una manera, sin embargo, para mostrar disparos en miniatura y tienen imágenes más grandes aparecen en el momento que el usuario mueve el cursor del ratón sobre la imagen de vista previa más pequeño. El uso de algunos básicos Hojas de estilo en cascada (CSS) y código HTML, puede crear páginas de imágenes interactivas que son a la vez atractivo y fácil de navegar.
Instrucciones
1 Crear o abrir una nueva página Web en un editor HTML o texto. Puede utilizar programas populares de edición de HTML, como Dreamweaver, Expression Web, perrito caliente u otros. Como alternativa, se puede usar un simple editor de texto como el Bloc de notas de Windows, si tiene experiencia con la codificación de páginas HTML a partir de cero.
2 Inserte el siguiente código entre las "<head>" y "</ head> de la página:
"<Style type =" text / css ">
.miniatura{
position: relative;
z-index: 0;
}
.thumbnail: hover {
background-color: transparente;
z-index: 50;
}
lapso .thumbnail {/
CSS para una imagen ampliada /
position: absolute;
background-color: lightyellow;
padding: 5px;
izquierda: -1000px;
frontera: 1px gris discontinua;
visibility: hidden;
de color negro;
text-decoration: none;
}
.thumbnail lapso img {/ CSS para una imagen ampliada /
border-width: 0;
padding: 2px;
}
.thumbnail: lapso de libración {/ CSS para una imagen ampliada en vuelo estacionario /
visibilidad: visible;
top: 0;
izquierda: 60px; / Posición en la imagen ampliada debería compensar horizontal /
}
</ Style> "
Ajuste la posición de desplazamiento horizontal de la imagen emergente mediante la modificación del valor en la última línea de código.
3 Desplazarse hasta el lugar entre la "<body>" y "</ body> en la que desea que las imágenes en miniatura aparecen en la página Web, a continuación, copia y pega el siguiente código:
<a class="thumbnail" href="#thumb"> <img width = "100px" height = "66px" border = "0" /> <span> <img /> <br /> la leyenda de texto de muestra </ span > </a><a class="thumbnail" href="#thumb"> <img width = "100px" height = "66px" border = "0" /> <span> <img /> <br /> la leyenda de texto de muestra </ span > </a> "
4 Cambie el valor "carpeta / samplepic1.jpg" a la ruta relativa para la primera miniatura que desea visualizar. Sustituir el valor "carpeta / largepci1.jpg" con la ruta y el archivo que desea utilizar para la foto emergente más grande. Hacer lo mismo con el segundo bloque de código. Cambiar el "Muestra Leyenda de texto" a algo que describe mejor la foto emergente.
5 Cambiar los valores de altura y anchura en el código para ajustar el tamaño de la imagen emergente.
6 Crear bloques adicionales con el código para añadir más imágenes en miniatura de la página HTML.
7 Introducir otros atributos de texto, etiquetas o según sea necesario en el documento HTML.
8 Guarde el archivo HTML, luego subirlo a su servidor Web.
