Foros del Web » Creando para Internet » CSS »

coordenadas en sprite

Estas en el tema de coordenadas en sprite en el foro de CSS en Foros del Web. tengo un sprite con dos imágenes en paralelo horizontalmente. el problema es que se muestran las dos imágenes. he probado con valores positivos, negativos, usar ...
  #1 (permalink)  
Antiguo 03/03/2011, 17:17
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
coordenadas en sprite

tengo un sprite con dos imágenes en paralelo horizontalmente. el problema es que se muestran las dos imágenes. he probado con valores positivos, negativos, usar width y height, pero no hay manera de que me muestre sólo la primera imagen
Cita:
#img a{
background-image: url("sprite.jpg");
padding: 5px 0 12px 40px;
background-position: 0 -4px;
background-repeat: no-repeat;
}

#img a:hover{
background-position: -32 -4px;
}
gracias
  #2 (permalink)  
Antiguo 03/03/2011, 18:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: coordenadas en sprite

si solo son dos imágenes paralelas bastaría con con:

Código CSS:
Ver original
  1. #img a{
  2. display:block;
  3. width:32px;
  4. height:32px;
  5. background: url(sprite.jpg) top no-repeat;
  6. padding: 5px 0 12px 40px;
  7. }
  8. #img a:hover{
  9. background-position: bottom;
  10. }

el ancho y alto coloca el remanente de las medidas de tus imágenes menos el padding que aplicas
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 03/03/2011, 19:05
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: coordenadas en sprite


Debes situarlos en vertical necesariamente.
Además tienes que tener en cuenta el espacio necesario para el padding entre las dos imágenes. En tu caso, ese espacio es de 12px. Con una distancia menor asomaría la segunda imagen.
  #4 (permalink)  
Antiguo 04/03/2011, 06:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: coordenadas en sprite

gracias a ambos por responder

Ag666, son 7 imágenes en paralelo horizontalmente colocadas. ahora me doy cuenta que al decir 2 imágenes, conlleva no poder darme una respuesta satisfactoria

sanxuan, si son en vertical no tengo problemas. lo que quiero es aprender como se hace en horizontal

de nuevo, agradecida por vuestras respuestas
  #5 (permalink)  
Antiguo 04/03/2011, 07:10
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: coordenadas en sprite

La única posibilidad de colocarlas en horizontal usando CSS2.1 es usar el método que ha expuesto Ag666. Deberías incluir un div del tamaño de las imágenes dentro del div más grande.

Última edición por sanxuan; 04/03/2011 a las 07:17
  #6 (permalink)  
Antiguo 04/03/2011, 11:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: coordenadas en sprite

compañero sanxuan me permito diferir de su idea, no importa si las imágenes están en paralelo horizontal o vertical.

para especificar las coordenadas utilizamos background-position: X Y;

dependiendo a la dirección a donde se encuentren nuestras imágenes especificaremos en valor negativo la X o la Y

inclusive podemos usar imágenes en varias columnas por lo que ya tendríamos que usar valores negativos en ambos ejes

compañera IsaBelM pruebe este ejemplo
Código CSS:
Ver original
  1. .botones{display:block;width:32px;height:32px;text-indent:-100px;overflow:hidden;margin:3px;}
  2. .boton1{background:url(https://www.sugarsync.com/pf/D162229_6644015_727551) 0 0 no-repeat;}
  3. .boton1:hover{background-position:0 -32px;}
  4. .boton2{background:url(https://www.sugarsync.com/pf/D162229_6644015_727551) 0 -64px no-repeat;}
  5. .boton2:hover{background-position: 0 -96px;}

Código HTML:
Ver original
  1. <a href="#" class="botones boton1">Facebook</a>
  2. <a href="#" class="botones boton2">RSS</a>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 04/03/2011, 19:06
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: coordenadas en sprite

Tal vez me he expresado mal, yo no entiendo que digas algo distinto. Al decir IsabelM que se mostraban las dos imágenes he sobreentendido que el elemento que las contiene tiene un ancho mayor que las imágenes, tal y como representé en mi comentario que envié sin leer el tuyo. No ha estado en mi ánimo el intentar contradecirte.
En esas circunstancias la única posibilidad es situar las imágenes del sprite en vertical.
En tu caso, has supuesto que el elemento que contiene la imagen y la imagen tienen las mismas dimensiones. De haber sido así no se hubieran mostrado las dos imágenes nunca.
Concuerdo contigo en que de ese modo es indiferente si se colocan horizontal o verticalmente.
Como dije en mi intervención, tu método es perféctamente válido también para contenedores que son mayores que la imagen de fondo, siempre que anidemos dentro de él un div con el tamaño de la imágen y usemos el fondo en él.
Parece que CSS3 nos va a simplificar bastante más las cosas en estos casos y nos ofrece otras posibilidades.
Un saludo.
  #8 (permalink)  
Antiguo 05/03/2011, 08:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: coordenadas en sprite

bien, gracias chicos por vuestras respuesta. después de tener muy en cuenta vuestras respuestas y extrañamente no lograr mi objetivo, hice una búsqueda menos crispada por la desesperación y encontré esto
Cita:
El código anterior muestra uno de los trucos habituales para manejar sprites complejos. En primer lugar se añade una imagen transparente de 1px x 1px a todos los elementos mediante una etiqueta <img>. A continuación, desde CSS se establece una imagen de fondo a cada elemento <img> y se limita su tamaño para que no deje ver las imágenes que se encuentran cerca
fuente: http://www.librosweb.es
con ello he logrado mi objetivo

Etiquetas: coordenadas, sprite
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 15:17.