-
Cómo crear una imagen de sustitución en CSS
-
efectos de conversión de imagen son una de las características comunes de diseño de sitios web más avanzados. Cuando se coloca el cursor sobre una imagen con un efecto de rollover, la imagen cambia de aspecto hasta que mueva el cursor fuera. Hay muchos métodos para crear efectos de rollover, pero uno de los más ágil y de aspecto profesional es hacerlas en el CSS.Instrucciones
1 Crear las dos imágenes necesarias para su imagen de sustitución en el software de edición gráfica y guardarlas como archivos jpg. Asegúrese de que ambas imágenes tienen exactamente las mismas dimensiones en píxeles y la misma cantidad, si alguna, del espacio vacío que rodea el gráfico en cada archivo jpg.
2 Crear un nuevo documento de gráficos de la misma anchura que las imágenes y exactamente el doble de la altura de cualquiera.
3 Pegar las dos imágenes en el nuevo documento. Coloque la imagen inicial en el la imagen de sustitución en la parte inferior y superior; deben ser perfectamente horizontalmente alineados uno con el otro y ocupan todo el espacio disponible en el documento. Guarde este nuevo archivo como un archivo JPG y el nombre de algo descriptivo, como rolloverimage.jpg. Este es el único archivo de imagen que va a utilizar para el vuelco; usted no necesita los dos originales.
4 Cargar la imagen a su sitio web o de un servicio de alojamiento de imágenes gratuito y guardar todo su URL.
5 Abra el documento HTML en un procesador de texto y localizar las etiquetas de la cabeza (<head> y </ head>). Ellos deben estar en la parte superior del documento.
6 Añadir etiquetas de estilo CSS en medio de las etiquetas de la cabeza, si no están ya presentes. Las etiquetas deben tener este aspecto: <style type = "text / css"> y </ style>.
7 Añadir código CSS entre las etiquetas de estilo para definir el comportamiento inicial de su imagen de sustitución de. El código básico para esto es a. {bloqueo de pantalla; Ancho: px; altura: px; background: url () no-repeat 0 0; sobrecarga oculta; text-indent: -10000px; font-size: 0px; line-height: 0px;}.
8 Añadir los valores necesarios en el código CSS para hacer que se apliquen a su imagen. Añadir el valor de píxel de la anchura de su archivo rolloverimage.jpg justo antes del primer px, el valor de píxel de la mitad de la altura del archivo justo antes de la segunda px y la URL completa del archivo de imagen en el medio del paréntesis.
9 Definir un nombre para la clase CSS de la imagen de sustitución. Esto es lo que se utiliza para indicar en el código HTML que la imagen debe utilizar el CSS que acaba de introducir, y que puede ser cualquier palabra que desea. Introduzca esta palabra inmediatamente después del período inicial después de la una en el código CSS, sin espacio entre ellos. Por ejemplo, si desea llamar a la clase "rollinover", el código CSS debe comenzar con a.rollinover.
10 Añadir una segunda línea de código CSS entre el código que acaba de escribir y la etiqueta de estilo de cierre. Esta línea va a definir lo que sucede cuando el visitante pasa el cursor sobre la imagen. El código básico para esto es a: hover. {Background-position: 0 -px;}.
11 Añadir la información necesaria para la segunda línea para que sea aplicable a su imagen. Añadir el nombre de la clase que ha definido inmediatamente después del período después del vuelo estacionario sin un espacio, y añadir el valor de píxel de la mitad de la altura del archivo de imagen entre el guión y el px. Por ejemplo, si usted nombró la clase "rollinover" y la imagen es de 100 píxeles de altura, su código se vería así: a: hover.rollinover {background-position: 0 -50px;}.
12 Localizar en qué parte del código que desea colocar su imagen.
13 Agregue el código <a </a> texto class=""> en la que desea que aparezca la imagen. Añadir el nombre de la clase que ha definido en la CSS entre las comillas, y sustituir la palabra "texto" con una breve descripción de la imagen (o del enlace que se utilizará como, en su caso).
14 Añadir el href código = "" entre las primeras comillas y el paréntesis de cierre de la apertura de una etiqueta, con la URL que desea que la imagen para enlazar a encuentra entre el nuevo conjunto de comillas, si la imagen es ser un enlace .
