Sélection de smileys avec javascript

Commenter

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

S'inscrire maintenant

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.

Du même auteur (Hellway)