Buen dia, escribo para que me orienten como podria poner smiles a los comentarios de un sistema de noticias, con sprites. Ya tengo la position de cada sprite, me falta la manera de implementarlo:

Ejem:

.caretos .sad{ background-position: 0 -800px;}
.caretos .smile{ background-position: 0 -825px;}
.caretos .sonriendo{ background-position: 0 -850px;}
.caretos .sorprendido{ background-position: 0 -875px;}
.caretos .tongue{ background-position: 0 -900px;}
.caretos .triste{ background-position: 0 -925px;}
.caretos .unsure{ background-position: 0 -950px;}
.caretos .wink{ background-position: 0 -975px;}

Tambien ya tengo la imagen con cada sprite.

Como dije mas arriba, no se como implementarlo en el formulario para comentar. Saludos y espero su respuesta.

Buen dia, escribo para que me orienten como podria poner smiles a los comentarios de un sistema de noticias, con sprites. Ya tengo la position de cada sprite, me falta la manera de implementarlo:

Ejem:

.caretos .sad{ background-position: 0 -800px;}
.caretos .smile{ background-position: 0 -825px;}
.caretos .sonriendo{ background-position: 0 -850px;}
.caretos .sorprendido{ background-position: 0 -875px;}
.caretos .tongue{ background-position: 0 -900px;}
.caretos .triste{ background-position: 0 -925px;}
.caretos .unsure{ background-position: 0 -950px;}
.caretos .wink{ background-position: 0 -975px;}

Tambien ya tengo la imagen con cada sprite.

Como dije mas arriba, no se como implementarlo en el formulario para comentar. Saludos y espero su respuesta.

Usa div's o puedes agregarle ese estilo a la imagen de los smilies.

Ya busque, se habla de sprites, pero nada que me ayude con esto. Ademas solo se habla de como crearlos, no como implementarlos en forma de smiles...

Puedes usar div's pero si prefiere usar el tag img, usa <img src="sprite.png" style="background-position: 0 -925px;" />

depende, si por ejemplo tus smileys son del tipo :sad: :winky: ...
bastaría con hacer un str_replace.

Para colocarlos te recomendaría usar un span con tamaño definido, algo así:

<style type="text/css">
span.caretos {
width: 16px;
height: 16px;
background-image: url(blabla.png);
}
.caretos .sad {...}
</style>
y un php srencillo:

$texto = preg_replace(&#39;/:([a-z]+):/i&#39;, &#39;<span class="caretos //1"></span>&#39;, $texto);

El reemplazo usa expresiones regulares, si lo necesitas, lo explicaré algo más

Saludos ...