Foros del Web » Creando para Internet » CSS »

Duda de código en imagenes al seleccionarlas

Estas en el tema de Duda de código en imagenes al seleccionarlas en el foro de CSS en Foros del Web. Hola antes que nada; mi duda es la siguiente: Una página cómo http://www.infectedfx.net tiene un logo que al pasar el ratón encima cambia como si ...
  #1 (permalink)  
Antiguo 28/10/2008, 22:36
Avatar de AEP
AEP
 
Fecha de Ingreso: junio-2008
Ubicación: Buenos Aires, Argentina
Mensajes: 26
Antigüedad: 9 años, 6 meses
Puntos: 0
Duda de código en imagenes al seleccionarlas

Hola antes que nada; mi duda es la siguiente:
Una página cómo http://www.infectedfx.net tiene un logo que al pasar el ratón encima cambia como si hiciera un focus, al maquetearlo ponen una imagen así http://www.infectedfx.net/wp-content/themes/shuffle/pix/logo.gif.
Lo que yo no entiendo es cómo pongo el código para hacer esto, ya que lo poniendo las imagenes separadas, así me ahorro tiempo.
Google, también tiene esto, acá pueden verlo https://mail.google.com/mail/images/2/5/c/icons3.png, la verdad no entiendo como hacen para poner 20 iconos y acomodarlos en la página. Me podrían explicar?.

Saludos,
AEP.
  #2 (permalink)  
Antiguo 29/10/2008, 04:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda de código en imagenes al seleccionarlas

Hola AEP
La idea es cargar sólo un archivo que contiene todas las imágenes y colocarlo como background con unas coordenadas específicas para que se vea una de las imágenes.
Para lograr el efecto lo que se hace es cambiar las coordenadas del background.

Pero te lo explico mejor con un ejemplo que Mikmoro tiene en su página
http://araudi.net/ejemplos/rollover_..._posicion.html

Si te fijas usa el mismo archivo para el fondo:
Cita:
a {
background:transparent url(../img/color_BN.jpg) no-repeat scroll center top;
display:block;
height:100%;
width:100%;
}

a:hover {
background:transparent url(../img/color_BN.jpg) no-repeat scroll center bottom;
}
lógicamente, estos enlaces están contenidos en un div con una medidas tales que sólo muestra la imagen deseada.

Un saludo.

P.D.: Las gracias a Mikmoro y a DaPhyre que en su día me lo explicaron a mí
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 31/10/2008, 04:01
Avatar de AEP
AEP
 
Fecha de Ingreso: junio-2008
Ubicación: Buenos Aires, Argentina
Mensajes: 26
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Duda de código en imagenes al seleccionarlas

Entendido a la perfección, muy bien explicado. Muchas gracias kseso?

Un saludo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:10.