Cambio de Imagen CSS

Tengo un script que maneja los cambios de imagen con css. ¿Qué me gustaría saber si esta es la forma correcta de hacer un rollover CSS? También quería saber si esto es bueno, ¿cómo maneja otras imágenes de rollover? ¿Tiene que tener un css separado para cada imagen?

Aquí hay un ejemplo: http://jsfiddle.net/GFec3/40/

Código CSS: 

a.rollover {
   display: block;
   width: 27px;
   height: 25px;
   text-decoration: none;
   background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}

a.rollover:hover {
   background-position: -350px 0;
}

.displace {
   position: absolute;
   left: -5000px;
}

HTML

 <a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a>

Esto funciona, pero solo quería saber si hay una forma especial de manejar más de una imagen de rollover.

preguntado el 24 de agosto de 12 a las 07:08

Se eliminó la etiqueta CSS3, ya que esa etiqueta solo debe usarse cuando la pregunta es específicamente sobre CSS3. -

3 Respuestas

No tienes que usar imágenes de fondo en css. Ejemplo:

<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
  <IMG class="on" src="...">
  <IMG class="off" src="...">
</DIV>

Hay muchas maneras de hacer esto. Cuál elegir depende de ti.

Respondido 24 ago 12, 08:08

Estoy buscando una especie de llave en mano. El guión que publiqué parece mucho trabajo para cada rollover. Preferiría tener un script css y luego poder activar y desactivar la imagen y dejar que css maneje el intercambio de ellos. - Frank G.

@FrankG. Eso es exactamente lo que hace mi ejemplo. Use esas clases en cualquier lugar donde necesite un traspaso. - Ariel

He estado jugando con el script en jfiddle que puedes ver aquí: jsfiddle.net/GFec3/48 Sin embargo, el enlace de Facebook parece parpadear. El resto funciona bien. ¿Alguna sugerencia? ¿También es la forma de hacer que las tres imágenes se muestren horizontales? ¡Gracias de nuevo! - Frank G.

El de facebook parpadea porque escribiste dsrc en lugar de src. Para hacerlos cambiar horizontalmente block a inline en el css (en ambos lugares). Y en lugar de usar un DIV con roll Usar una SPAN. Probablemente tendrá que hacer dos conjuntos de reglas css: uno para inline una para block. - Ariel

¡Esta es una solución genial! Me pareció importante señalar que si DIV es un enlace y agrega una tercera imagen para el estado activo, el enlace no hará clic. Sin embargo, no hay solución para esto hasta el momento. - Brendan

Utilice las Sprite CSS, con esto usará solo una imagen de fondo, solo tiene que cambiar la posición de fondo para diferentes imágenes flotantes

Sprites de CSS: El beso de la muerte de Image Slicing

Respondido 24 ago 12, 08:08

Sí, soy consciente de eso, pero no me gusta toda la idea porque tendría que crear una entrada css separada para cada rollover. Parece mucho más. - Frank G.

El método que tiene actualmente es el más eficiente. Entre otras cosas, "precarga" la imagen de rollover ya que es la misma que la de no rollover, solo que en una parte diferente. También reduce el número de solicitudes HTTP al mínimo (menos de las data esquema) y, en algunos casos, mejora el tamaño del archivo (el mejor de los casos son dos imágenes que usan paletas de colores similares, se necesita una tabla de colores en lugar de dos).

No lo cambies, es perfecto.

Tiene que definir un CSS separado para cada rollover, sin embargo, si las imágenes son del mismo tamaño, puede reducir el daño reutilizando el :hover definiciones.

Respondido 24 ago 12, 08:08

No lo veo porque la imagen simplemente se duplica como un despecho que realmente no ahorra en el tamaño del archivo. Sin embargo, sabe que XYZ duplica su archivo css porque si tiene 5 o 10, son 5 o 10 entradas en su css que no tendría que hacer. ¡¡Gracias por la info!! - Frank G.

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.