Sélection de smileys avec javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 11 341 fois - Téléchargée 25 fois

Contenu du snippet

Bon, je suis pas trop à fond dans javascript, mais pour les besoins de mon site, j'ai dû dévellopper ce petit truc sympa. Alors, en clair, c'est un script qui crée un tableau de sélection dans lequel on peut ranger par thème ou par expression tous les smileys qu'on possède et ce, simplement en remplissant un tableau. A vu d'oeil, ça n'est pas très parlant, mais je vous conseille d'essayer le script pour voir comment cela fonctionne.

Vous pouvez avoir un aperçu ici : http://groupeclan.free.fr/index.php?Rub=Theme&Act=Ajouter&Ent=5

Source / Exemple :


<form id="Ajouter" action="<? echo $ChSiteIndex; ?>" method="post"><div id="Avatar"></div><input type="hidden" name="FSmiley" value="Smil00" id="Smiley" /><textarea id="Contenu"></textarea></form>
<script type="text/javascript">
<!--
// Sélection d'un avatar dynamiquement par Hellway
// Génère du xhtml 1.0 Strict
// Ce script ne peut être utilisé sur un site
// ne respectant pas les normes du W3C
// Les avatars doivent tous avoir la même extension

function Initialisation()
{
// Initialisation des tableaux (Changer ici pour de nouveaux avatars ou groupes d'avatars)

ImgGrp = new Array;
Image = new Array;
Position = new Array;

// Chemin des images
Chemin="http://groupeclan.free.fr/Images/Smiley/";
// Pointeur du champs de message cible
Boite=document.forms['Ajouter'].elements['Contenu'];
// Pointeur du champs cible
Cible=document.forms['Ajouter'].elements['Smiley'];
// Extension des avatars (ex: .gif)
Extension=".gif";
// Avatar par défaut
DAvatar="Smil00";
// Groupes d'avatars
ImgGrp[1]= "Rire";
Position[ImgGrp[1]] = 1;
Image[ImgGrp[1]] = new Array;
Image[ImgGrp[1]][1] = "Smil04";
Image[ImgGrp[1]][2] = "Smil02";
Image[ImgGrp[1]][3] = "Smil09";
Image[ImgGrp[1]][4] = "Smil01";
Image[ImgGrp[1]][5] = "Smil05";
Image[ImgGrp[1]][6] = "Smil06";

ImgGrp[2]= "Eton";
Position[ImgGrp[2]] = 1;
Image[ImgGrp[2]] = new Array;
Image[ImgGrp[2]][1] = "Smil12";
Image[ImgGrp[2]][2] = "Smil15";
Image[ImgGrp[2]][3] = "Smil43";

ImgGrp[3]= "Ener";
Position[ImgGrp[3]] = 1;
Image[ImgGrp[3]] = new Array;
Image[ImgGrp[3]][1] = "Smil11";
Image[ImgGrp[3]][2] = "Smil28";
Image[ImgGrp[3]][3] = "Smil18";

ImgGrp[4]= "Pleure";
Position[ImgGrp[4]] = 1;
Image[ImgGrp[4]] = new Array;
Image[ImgGrp[4]][1] = "Smil38";
Image[ImgGrp[4]][2] = "Smil13";
Image[ImgGrp[4]][3] = "Smil14";
Image[ImgGrp[4]][4] = "Smil26";

ImgGrp[5]= "Deso";
Position[ImgGrp[5]] = 1;
Image[ImgGrp[5]] = new Array;
Image[ImgGrp[5]][1] = "Smil07";
Image[ImgGrp[5]][2] = "Smil10";
Image[ImgGrp[5]][3] = "Smil22";
Image[ImgGrp[5]][4] = "Smil24";

ImgGrp[6]= "Cool";
Position[ImgGrp[6]] = 1;
Image[ImgGrp[6]] = new Array;
Image[ImgGrp[6]][1] = "Smil17";
Image[ImgGrp[6]][2] = "Smil03";
Image[ImgGrp[6]][3] = "Smil08";
Image[ImgGrp[6]][4] = "Smil16";
Image[ImgGrp[6]][5] = "Smil19";

// Affichage du tableau de sélection des avatars
var Affichage = new Array;
Affichage[1]="<table><caption>Selection d'un avatar</caption><tr><th scope=\"row\">Plus ---></th>";
Affichage[2]="<th scope=\"row\">Selection</th>";
Affichage[3]="<th scope=\"row\"> Moins ---></th>";

for(i=1 ; i<ImgGrp.length ; i++)
{
Affichage[1]= Affichage[1] + "<td><a href=\"javascript:Suivant('" + ImgGrp[i] + "');\" title=\"Avatar suivant\"><img src=\"Images/Site/Plus.gif\" alt=\"Bouton&amp;: Plus\" /></a></td>";
Affichage[2]= Affichage[2] + "<td><div id=\"" + ImgGrp[i] + "\"></div></td>";
Affichage[3]= Affichage[3] + "<td><a href=\"javascript:Precedent('" + ImgGrp[i] + "');\" title=\"Avatar précédent\"><img src=\"Images/Site/Moins.gif\" alt=\"Bouton&amp;: Moins\" /></a></td>";
}

Affichage[1]+="<td rowspan=\"3\"><div id=\"Afficher\"></div></td><td rowspan=\"3\"><a href=\"javascript:Message();\" title=\"Insérer l'avatar dans le corps du message\"><img src=\"Images/Site/Retour.gif\" alt=\"Bouton&nbsp;: Insérer\" /></a></td></tr>";
Affichage[2]+="</tr>";
Affichage[3]+="</tr></table>";

document.getElementById("Avatar").innerHTML= Affichage[1] + Affichage[2] + Affichage[3];

// Initialisation des avatars

for(i=1 ; i<ImgGrp.length ; i++)
{
	document.getElementById(ImgGrp[i]).innerHTML = "<a href=\"javascript:Afficher('" + Image[ImgGrp[i]][Position[ImgGrp[i]]] + "');\" title=\"Sélectionner cet avatar\"><img src=\"" + Chemin + Image[ImgGrp[i]][Position[ImgGrp[i]]] + Extension + "\" alt=\"Avatar\" /></a>";
}

// Initialisation de l'avatar par défaut
Afficher(DAvatar);

}

// Fonctions néccessaires au script

// Fonctions permettant d'afficher l'avatar suivant
function Suivant(Grp)
{
	if(Position[Grp]<(Image[Grp].length-1))
	{
	document.getElementById(Grp).innerHTML = "<a href=\"javascript:Afficher('" + Image[Grp][Position[Grp]+1] + "');\" title=\"Selectionner cet avatar\"><img src=\"" + Chemin + Image[Grp][Position[Grp]+1] + Extension + "\" alt=\"Avatar\" /></a>";
	Position[Grp] = Position[Grp] + 1;
	}
}

// Fonction permettant d'afficher l'avatar précédant
function Precedent(Grp)
{
	if(Position[Grp]>1)
	{
	document.getElementById(Grp).innerHTML = "<a href=\"javascript:Afficher('" + Image[Grp][Position[Grp]-1] + "');\" title=\"Selectionner cet avatar\"><img src=\"" + Chemin + Image[Grp][Position[Grp]-1] + Extension + "\" alt=\"Avatar\" /></a>";
	Position[Grp] = Position[Grp] - 1;
	}
}

// Fonction servant à mettre l'avatar en grossissement
function Afficher(Avatar)
{
if(document.getElementById) { document.getElementById("Afficher").innerHTML = "<img src=\"" + Chemin + Avatar + Extension + "\" width=\"30\" height=\"30\" alt=\"Avatar\">"; }
Cible.value = Avatar;
}

// Fonction permettant de mettre le smiley dans le message
function Message()
{
Boite.value=Boite.value + "[img]" + Chemin + Cible.value + Extension + "/img";
}

window.onload=Initialisation();
//-->
</script>

Conclusion :


Ce script génére du xhtml 1.0 strict, veuillez ne pas le changer de façon à ce qu'il ne respecte plus les normes fixées par le W3C.

Quelques recommandations :
- Le script insère le smiley sélectionné dans un champ caché qu'il vous sera facile de récupèrer côté serveur. Pour cela, il vous suffit de changer la valeur de la variable Cible.
- Pour que le script fonctionne, il faut donner un id à votre formulaire et remplacer l'id de l'exemple dans les variables Cible et Boite.
- La variable Boite désigne le "textarea" contenant le corps du message.

Voilà, bonne bourre ! :-)

A voir également

Ajouter un commentaire

Commentaires

cs_joebuz
Messages postés
321
Date d'inscription
samedi 12 février 2005
Statut
Membre
Dernière intervention
21 février 2013
-
salut,
je suis interessé par ton script, mais je ne connais rien en javascript, je l'ai modifié pour les besoins (url des images), mais cela ne fonctionne pas j'ai uniquement le textarea qui s'affiche.
Peux-tu m'aider stp ?

url d'essai : http://www.waterpolo-angers.com/essai.html
cs_nossoctoruss
Messages postés
126
Date d'inscription
samedi 28 novembre 2009
Statut
Membre
Dernière intervention
9 juin 2013
-
marche pas --"

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.