[SOLUCIONADO] Como puedo utilizar un trocito de imagen para algo?

[Alexparedes19]

Buenas!! He encontrado esta imagen
*Esta imagen es de Habbo
Esta imagen tiene un montón de botones, cajas etc... Me gustaría saber cómo puedo utilizar tan solo un trozo de imagen como botón por ejemplo. He visto en muchos juegos y sitios que utilizan este sistema, pero nunca he sabido como aplicarlo. Podríais ayudarme? Si alguien me puede decir si esto tiene nombre, se lo agradecería mucho. MUCHAS GRACIAS! :D

PD: Talvez mi pregunta sea tonta o imposible, pero por favor, tened en cuenta que soy bastante novato... :D

[fede5426]

No es una pregunta tonta, ninguna lo es, para eso es el foro para sacarse las dudas pregunta sin miedo.

A esas imágenes se les llama "Sprites" se usan para no cargar tanto el sitio.

Para usar solo un trozo como dijiste, tenes que colocarla de "background-image" de un elemento, y usar "background-position" para elegir que parte de la imagen se va a mostrar..

Te dejo un ejemplo para que veas como funciona:

Supongamos que tenes un botón, querés que sea el cuadradito celeste y cuando se pase el cursor por encima cambie al amarillo. Primero tenes que darle un tamaño al botón (lo que mida la parte de la imagen que querés mostrar), en este caso 30px x 30px.. con background-image agregas el sprite y con background-position la acomodas, teniendo en cuenta que el primer valor es X (horizontal) y el segundo es Y (vertical)..

X con valor negativo mueve la imagen a la izquierda y con positivo a la derecha.
Y con valor negativo mueve la imagen hacia arriba y positivo hacia abajo.

Si usas TOP, BOTTOM, LEFT o RIGHT.. la imagen se pega al lugar que indicaste respectivamente.

Código CSS:

button{
    width:30px;
    height:30px;
    background-image:url("http://i.imgur.com/ZBrZ1TO.png");
    background-position:-40px top;
}
 
button:hover{
    background-position:-40px -200px;
}
 

Te dejo una Demo

Saludos

[Alexparedes19]

Iniciado por fede5426

No es una pregunta tonta, ninguna lo es, para eso es el foro para sacarse las dudas pregunta sin miedo.

A esas imágenes se les llama "Sprites" se usan para no cargar tanto el sitio.

Para usar solo un trozo como dijiste, tenes que colocarla de "background-image" de un elemento, y usar "background-position" para elegir que parte de la imagen se va a mostrar..

Te dejo un ejemplo para que veas como funciona:

Supongamos que tenes un botón, querés que sea el cuadradito celeste y cuando se pase el cursor por encima cambie al amarillo. Primero tenes que darle un tamaño al botón (lo que mida la parte de la imagen que querés mostrar), en este caso 30px x 30px.. con background-image agregas el sprite y con background-position la acomodas, teniendo en cuenta que el primer valor es X (horizontal) y el segundo es Y (vertical)..

X con valor negativo mueve la imagen a la izquierda y con positivo a la derecha.
Y con valor negativo mueve la imagen hacia arriba y positivo hacia abajo.

Si usas TOP, BOTTOM, LEFT o RIGHT.. la imagen se pega al lugar que indicaste respectivamente.

Código CSS:

button{
    width:30px;
    height:30px;
    background-image:url("http://i.imgur.com/ZBrZ1TO.png");
    background-position:-40px top;
}
 
button:hover{
    background-position:-40px -200px;
}
 

Te dejo una [URL="http://codepen.io/fede5426/pen/gpZgLw"]Demo[/URL]

Saludos

Muchísimas gracias! No pensé que fuera tan fácil hahahahaha