Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-06-2011, 01:25 (UTC)    
Título del mensaje: [CSS]Cambiar emoticonos en comentarios

Codigo: Cambiar emoticonos (smiley) en comentarios (o libro de visitas)

Este "truko" se logra gracias a CSS
El codigo es el siguiente, y se ve bien con fondo blanco

Pegar codigo en "Texto por encima.." (o en tu hoja de estilos)



Código:
<!-- codigo por http://adan-2994.es.tl/Tutorial_cambiar_emoticonos_de_PWG.htm -->
 <style type="text/css">
 img[src="http://smilies.webme.com/smiles/wink.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:19px;background-size:250px;
 background-position: 93% 100%;
 }
 img[src="http://smilies.webme.com/smiles/smiley.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 92% 3%;
 }
 img[src="http://smilies.webme.com/smiles/cheesy.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 28% 99%;
 }
 img[src="http://smilies.webme.com/smiles/angry.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:235px;
 background-position: 93% 50%;
 }
 img[src="http://smilies.webme.com/smiles/sad.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 8% 3%;
 }/*codigo por http://adan-2994.es.tl/Tutorial_cambiar_emoticonos_de_PWG.htm */
 img[src="http://smilies.webme.com/smiles/shocked.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 48% 99%;
 }
 img[src="http://smilies.webme.com/smiles/cool.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:21px;background-size:250px;
 background-position: 47% 27%;
 }
 img[src="http://smilies.webme.com/smiles/huh.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 47% 3%;
 }
 img[src="http://smilies.webme.com/smiles/rolleyes.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 29% 27%;
 }
 img[src="http://smilies.webme.com/smiles/tongue.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 8% 75%;
 }
 img[src="http://smilies.webme.com/smiles/undecided.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:18px;background-size:250px;
 background-position: 8% 50%;
 }
 img[src="http://smilies.webme.com/smiles/cry.gif"]{
 width:0;height:0;background:url(http://img.webme.com/pic/a/adan-2994/yolks.png) no-repeat;
 padding:20px;background-size:250px;
 background-position: 70% 75%;
 }
 </style>


Los emoticonos son estos:



Aclaracion [Gracias a Team-Soporte] En el codigo estoy utilizando Sprites CSS
Esto carga mas rapido los emoticonos, si lo deseas puedes "recortar" los emoticonos de la imagen para usarlos individualmente.
Informacion sobre Sprites: http://www.desarrolloweb.com/articulos/sprites-css.html

.
.
.
.


Tutorial disponible en: Efectos Adan
.
.
.
.
.
.
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG


Ultima edición por adan-2994 el Vie Jun 10, 2011 9:37 pm; editado 1 vez
Mensaje11-06-2011, 01:31 (UTC)    
Título del mensaje:

Genial, tutorial!, me encanto ademas de que resulta ser muy util.

Seria importante decir que el tipo de css que se esta usando se llama CSS SPRITE en cual en definicion es una sola imagen para varias imagenes, y se usa funciones de posicionamiento en css para ubicar la imagen.

Este tema pronto será movito a Foro de Seleccion, gracias.
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mensaje16-06-2011, 21:51 (UTC)    
Título del mensaje:

Lo acabo de impletementar en mi sitio

Gracias por el efecto
______________
Miguel García | Desarrollador web freelance
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group