Crear sección de emoticonos

#1 (**permalink**) 01/05/2012, 08:52

Saludos a todos,

quería saber como puedo crear una sección de emoticonos para mi web, que sea como la de Foros del Web, por ejemplo.

Ya tengo una función en PHP que transforma los caracteres en las imágenes, pero tengo una duda que creo que es sencilla: ¿Cómo hago para que, al hacer click en el emoticono, aparezca la palabra que después será interpretada por mi función PHP y la transformará en la imagen? Esto se haría con Javascript, ¿no?

Saludos.

chinanzio · #2 (**permalink**) 01/05/2012, 10:15

A donde tiene que aparecer la palabra que después será interpretada por tu función PHP y la transformará en la imagen ?
podrías explicar un poco mas ?
un poco de codigo sería ideal
Saludos

#3 (**permalink**) 01/05/2012, 12:18

Hola chinanzio,

realmente no tengo un problema con el código, si no que no sé por dónde empezar.
Intentaré explicarme mejor:

Tengo una aplicación en mi web, un sistema de comentarios, al que quiero añadirle emoticonos, y que los usuarios, puedan añadirle las caritas en el mensaje.
Ya tengo operativa una función PHP, que ante determinados caracteres los cambia por las imágenes correspondientes; por ejemplo, si pones :smiley: aparecería una carita sonriente, por ejemplo.

Ahora, quiero que haya un panel, como el de los foros, en el que aparezcan los emoticonos que hay, y al hacer click en uno, aparecen los caracteres en el textarea sobre el que se está escribiendo.

Para simplificarlo, busco algo exactamente igual a los emoticonos de Foros del Web, por ejemplo, pero poniendo mis propias imágenes y caracteres.

Saludos

chinanzio · #4 (**permalink**) 01/05/2012, 17:08

Yo empezaría por un div con el atributo contentEditable

Código HTML:

<div contentEditable="true">
Este texto es editable y se pueden poner tags como el siguiente
 <img src="http://static.ajedrezweb.net/app/img/chess/flags/ES.png" />
y mezclarlo con las palabras
</div>

Y con javascript insertas o borras los tags img
Se entiende la idea ?

NOTA: no lo he probado con internet explorer ...

#5 (**permalink**) 02/05/2012, 00:13

Saludos chinazio,

lo que quiero es que aparezcan los caracteres en el textarea que luego serán interpretados por la función PHP. La idea la tengo clara, pero lo que no sé es desarrollarla.

¿Existe algún tutorial ya desarrollado o parecido a lo que necesito?

Gracias por su tiempo.

#6 (**permalink**) 03/05/2012, 09:03

¿Alguna idea o tutorial para hacer esto? O cuál es la sintaxis de Javascript, para al hacer click en un emoticono, aparezca en el textarea una palabra?

Saludos.

chinanzio · #7 (**permalink**) 03/05/2012, 09:26

algo asi ?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
function appendCountry(country) {
    var elTextarea = document.getElementById("el-textarea");
    elTextarea.value += country;
}
</script>
</head>
<body>
    <img src="http://static.ajedrezweb.net/app/img/chess/flags/ES.png" onclick="javascript:appendCountry('&españa;');" style="cursor:pointer;"/>
    <img src="http://static.ajedrezweb.net/app/img/chess/flags/AR.png" onclick="javascript:appendCountry('&argentina;');" style="cursor:pointer;"/>
    <textarea id="el-textarea" style="width: 300px; height: 100px;"></textarea>
</body>
</html>

#8 (**permalink**) 03/05/2012, 14:46

Hola chinanzio, acabo de implementar tu código y es justo lo que necesitaba.
Lo adaptaré para mi aplicación, me vendrá muy bien.

Muchas gracias por tu tiempo, y por ayudarme, de verdad.

Saludos!