Las ventanas emergentes o subyacentes son cada vez más populares en Internet. O, más simplemente, imágenes emergentes. Muchos propietarios de sitios a menudo tienen que crearlos con fines publicitarios, pero no todos conocen el algoritmo para su creación.
Es necesario
- - editor de HTML;
- - computadora portátil;
- - alojamiento.
Instrucciones
Paso 1
Cree o abra una nueva página web en HTML o un editor de texto. Puede utilizar programas populares como Dreamweaver, Expression Web y otros para este propósito. Si está dando sus primeros pasos en el lenguaje de programación HTML, utilice un "bloc de notas" normal.
Paso 2
Pegue el siguiente código entre las etiquetas "head" y "/ head":
.thumbnail {posición: relativa; índice z: 0;}
.thumbnail: hover {color de fondo: transparente; índice z: 50;}
.thumbnail span {/ * CSS para imagen ampliada * / position: absoluta; color de fondo: amarillo claro; relleno: 5px; izquierda: -1000px; borde: 1px gris discontinuo; visibilidad: oculta; de color negro; decoración de texto: ninguna;}
.thumbnail span img {/ * CSS para imagen ampliada * / border-width: 0; relleno: 2px;}
.thumbnail: hover span {/ * CSS para imagen ampliada al hover * / visibilidad: visible; arriba: 0; izquierda: 65px; / * posición donde la imagen ampliada debe desplazarse horizontalmente * /}
Paso 3
Ajuste el desplazamiento horizontal de la imagen emergente cambiando el valor en la última línea de código. Asigne espacio entre las etiquetas "body" y "/ body" donde desea que aparezca la imagen en la página web. Luego, copie y pegue el siguiente código:
Ejemplo de un título de texto
Un ejemplo de un título de texto"
Paso 4
Reemplaza "folder / largepci1.jpg" con el archivo usado para la foto emergente. Haz lo mismo con el segundo bloque de código. Cambie la línea "Ejemplo de título de texto" por lo que debería estar escrito en la imagen emergente. También cambie los valores de alto y ancho en el código para ajustar el tamaño de la imagen emergente. Cree bloques de código adicionales para agregar más bocetos. Ingrese otros atributos, etiquetas y texto en el documento HTML según sea necesario. Guarde el archivo HTML y luego cárguelo en su servidor web.
