Un avatar aléatoire a la place du QEEL ? Tutoriel pour les forums Forumactif, adaptable le cas échéant. Permet d'afficher des images de façon aléatoire à la place du Qui Est En Ligne grâce à un petit code javascript. Aléatoire, Avatars, Code Javascript, Forumactif, Templates

Bien, suite a une demande d'Anja, qui me supplie et fait les yeux du chat botté de Schrek, je me lance dans un petit tutoriel. Celui-ci vous explique comment remplacer l'image du Qui est en ligne par un avatar aléatoire, comme sur Aither. Je propose deux codes, un pour afficher simplement un avatar (ou d'autres images, c'est comme vous le sentez), et un autre pour afficher un avatar avec un lien vers la fiche de personnage.

L'inconvénient, par rapport a Aither, ou c'est totalement automatique (vive le PHP), c'est que pour forumactif, on va utiliser du javascript, et il faudra mettre la liste des membres a la main (et la mettre a jour, toussa toussa).

Petit exemple, comme d'habitude, sur cette page (a gauche, avatar simple, a droite, avatar avec lien)

Bon, on commence.

Introduction
Le script se compose de deux parties : la liste des avatars, et le code pour l'affichage.

Dans un souci de facilité pour la mise a jour, on insérera la liste dans le code de l'en-tête (au tout début par exemple, c'est sans importance, vu que ca n'a aucun impact sur celle ci).

Le code pour l'affichage, quant a lui, est a implémenter dans le fichier index_body (Affichage -> Templates -> Général -> index_body). Précision, il faut être fondateur pour avoir accès aux templates. Il faudra chercher le code suivant et le remplacer par le code donné plus bas.


Pour afficher un simple avatar :

Liste :

Code ▼ Sélectionner le code
<script language="javascript">
<!--
    avatars = new Array(4);
    avatars[0]= "http://img380.imageshack.us/img380/1200/reii01sd3.jpg";
    avatars[1]= "http://img390.imageshack.us/img390/8813/chopstickmadness01iy3.jpg";
    avatars[2]= "http://img355.imageshack.us/img355/8393/zuowen01zv4.jpg";
    avatars[3]= "http://img120.imageshack.us/img120/7650/avfilles016gg8.jpg";
-->
</script>

Le 4, dans new Array(4), est le nombre d'éléments que contient la liste. Ces éléments sont numérotés a partir de 0 (donc ici, 0, 1, 2, 3).
Entre guillemets, c'est l'adresse de l'avatar, tout simplement.

Affichage :

Code ▼ Sélectionner le code
<script language="javascript">
<!--
    index = Math.floor(Math.random() * avatars.length);
    avatar = '<img src="' + avatars[index] + '" border="0">';
    document.write(avatar);
-->
</script>

Ici, rien a changer. Il suffit de remplacer le code donné plus tôt par celui ci.

Pour afficher un avatar, avec lien vers la fiche de personnage

Liste :

Code ▼ Sélectionner le code
<script language="javascript">
<!--
    avatars = new Array(4);
    avatars[0]= new Array("Paro","http://img380.imageshack.us/img380/1200/reii01sd3.jpg","profile.forum?mode=viewprofile&u=1");
    avatars[1]= new Array("'Christa","http://img390.imageshack.us/img390/8813/chopstickmadness01iy3.jpg","profile.forum?mode=viewprofile&u=4");
    avatars[2]= new Array("Koori","http://img355.imageshack.us/img355/8393/zuowen01zv4.jpg","profile.forum?mode=viewprofile&u=61");
    avatars[3]= new Array("Anja","http://img120.imageshack.us/img120/7650/avfilles016gg8.jpg","profile.forum?mode=viewprofile&u=137");
-->
</script>

Le 4, dans new Array(4), est le nombre d'éléments que contient la liste. Ces éléments sont numérotés a partir de 0 (donc ici, 0, 1, 2, 3).
Il y a 3 données : le pseudo du membre, l'adresse de l'avatar et l'adresse de la fiche.

Affichage :

Code ▼ Sélectionner le code
<script language="javascript">
<!--
    index = Math.floor(Math.random() * avatars.length);
    avatar = '<a href="' + avatars[index][2] + '" target="_self">'
       + '<img alt="' + avatars[index][0] + '" src="' + avatars[index][1] + '" border="0"></a> ';
    document.write(avatar);
-->
</script>

Rien à changer ici, il suffit de remplacer le code donné plus tot par celui ci.