coordenadas en sprite

[IsaBelM]

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

#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

[ArturoGallegos]

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

Código CSS:

#img a{
display:block;
width:32px;
height:32px;
background: url(sprite.jpg) top no-repeat;
padding: 5px 0 12px 40px;
}
#img a:hover{
background-position: bottom;
}
 

el ancho y alto coloca el remanente de las medidas de tus imágenes menos el padding que aplicas

[sanxuan]

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.

[IsaBelM]

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

[sanxuan]

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.

[ArturoGallegos]

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:

.botones{display:block;width:32px;height:32px;text-indent:-100px;overflow:hidden;margin:3px;}
.boton1{background:url(https://www.sugarsync.com/pf/D162229_6644015_727551) 0 0 no-repeat;}
.boton1:hover{background-position:0 -32px;}
.boton2{background:url(https://www.sugarsync.com/pf/D162229_6644015_727551) 0 -64px no-repeat;}
.boton2:hover{background-position: 0 -96px;}
 

Código HTML:

<a href="#" class="botones boton1">Facebook</a>
<a href="#" class="botones boton2">RSS</a>
 

[sanxuan]

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.

[IsaBelM]

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

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