Cómo usar una sola imagen para poner varios iconos o categorías en un blog

kanikase · 10 Mar 2014

Alguien me puede decir como hago para usar una sola imagen para poner diferentes iconos, por ejemplo en un blog tengo los iconos de redes sociales, pero todos vienen en una sola imagen:

Pero yo lo que quiero es para poner imagenes para categorias en un blog de jueos online, no quiero usar de una imagen en una porque el codigo se haria muy grande. que alguien me explique

Foroweb · 10 Mar 2014

kanikase dijo:
Alguien me puede decir como hago para usar una sola imagen para poner diferentes iconos, por ejemplo en un blog tengo los iconos de redes sociales, pero todos vienen en una sola imagen:

Pero yo lo que quiero es para poner imagenes para categorias en un blog de jueos online, no quiero usar de una imagen en una porque el codigo se haria muy grande. que alguien me explique

Es curioso , me gustaría saber también así se puede hacer más responsivo el código :encouragement: eso ya lo había visto pero en Php en un script de warez :encouragement:

ramifenili · 10 Mar 2014

Se puede hacer complementando el HTML con CSS.
Acá podés ver cómo usé la imagen para tres redes sociales: http://jsfiddle.net/3tzGV/1
La posición de la imagen, la podés sacar con esta página: Sprite Cow - Generate CSS for sprite sheets

kanikase · 10 Mar 2014

ramifenili dijo:
Se puede hacer complementando el HTML con CSS.
Acá podés ver cómo usé la imagen para tres redes sociales: http://jsfiddle.net/3tzGV/1
La posición de la imagen, la podés sacar con esta página: Sprite Cow - Generate CSS for sprite sheets

No entendi nada

colobaggins · 13 Mar 2014

Buenas, eso creo que se llama css image sprite, podes buscarlo así. La idea es cargar una sola imagen grande en vez de varias chicas, para hacer menos consultas al servidor y otras ventajas más.
Se maneja con background-position. Es decir, cargas la imagen y para div o tag <a> le das una ubicación distinta de cada imagen. Por ejemplo:
Background: url(laurl.jpg) 0 0;
Background: url(laurl.jpg) 0 -25px;
Espero haberte dado una mano, saludos !

Enviado desde mi iPhone con Tapatalk

simpleweb · 14 Mar 2014

Te propongo dos opciones:

1ª usas esa imagen y creas zonas interactivas .
2ª usas imagenes individuales, te sirves de una tabla y enlazas cada imagen a cada sitio.

suarez · 14 Mar 2014

El tema es Sprites CSS ahorrarías tiempo de carga en tu pagina, peticiones al servidor, y si lo combinas con cloudflare seguramente tendrías un sitio veloz. Según varios estudios realizados por Yahoo!, hasta el 80% de la mejora en el rendimiento de la descarga de páginas web depende de la parte del cliente.

La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenes consiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo para mostrar cada imagen. Esta técnica se presentó en el artículo CSS Sprites: Image Slicing’s Kiss of Death y desde entonces se conoce con el nombre de sprites CSS.

Aquí el articulo completo 1.10. Rollovers y sprites (CSS avanzado)

OLMID · 15 Mar 2014

Es bastante sencillo

Ejemplo:
Tenemos esa imagen que contiene los iconos de 24x24px
Colocas este html

HTML:

<ul id="iconos">
<li class="icono1"></li>
<li class="icono2"></li>
<li class="icono3"></li>
<li class="icono4"></li>
etc.........
</ul>

Y este css

HTML:

#iconos li {background: url(http://4.bp.blogspot.com/-xWyhwRsNxmY/T0u_sVGz8QI/AAAAAAAAHck/p77h_vjely0/s1600/social.png); width: 24px; height: 24px; margin:10px;}

#iconos .icono1 {background-position: 0 0;}
#iconos .icono2 {background-position: 0 -28px;}
#iconos .icono3 {background-position: 0 -57px;}
#iconos .icono4 {background-position: 0 -87px;}
etc.........

Con esto se consigue que solo que cargue una sola imagen y una sola vez

Saludos