Ce tutoriel va vous expliquer comment créer une bannière aléatoire, c'est-à-dire une bannière qui change à chaque actualisation et à chaque changement de page.

Ce tutoriel vous expliquera aussi comment créer une bannière défilante, c'est-à-dire une bannière dont les images défilent les unes après les autres.

Condition à remplir :
- Être administrateur.



Étape 1 : Créer une page HTML :


Panneau d'administration
- Modules
- HTML - Gestion des pages HTML
- Créer une nouvelle page HTML

Paramétrez les champs ainsi :

Titre : bannière aléatoire
Voulez-vous utiliser le haut et le bas de page de votre forum ? Non
Utiliser cette page en tant que page d'accueil ? Non



Dans la zone de texte Code HTML :

- Cliquez sur -html , si celui-ci apparaît.
- Si c'est +html qui est affiché, ne cliquez pas Wink

Ensuite il faudra mettre dans la zone texte, le code approprié à votre version, parmis les codes de l'étape 2.

Étape 2 - Punbb : Le script à insérer :


Code sans défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

Code avec défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

          setInterval("document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

(il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière)



Étape 2 - Invision et Phpbb3 : Le script à insérer :


Code sans défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

Code avec défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

          setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

(il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière)



Étape 2 - Phpbb2 : Le script à insérer :


Code sans défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];

Code avec défilement de bannières :

Code:

var banner = new Array();

          banner.push('adresse_image_1');
          banner.push('adresse_image_2');
          banner.push('adresse_image_3');

          document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];

          setInterval("document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];",3000);

(il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière )



Pour ajouter une image dans toute les versions il faut :

► Ajouter une ligne "banner.push('adresse_image');" après la dernière ligne d'image ( ici banner.push('adresse_image_3'); ).

► Remplacer le adresse_image par l'url de la prochaine image des images devant apparaître aléatoirement.



Étape 3 : Lier le script à la page :


Panneau d'administration
► Général
► Forum | Configuration
► Description du site

Il suffit ensuite d'ajouter dans la description du site :

Code:

  <script type='text/javascript' src='url_de_la_page_html'></script>

En remplaçant url_de_la_page_html par l'adresse de la page que vous avec créé plus haut.

Si vous avez tout bien fait, vous avez fini votre bannière aléatoire !
Ce tuto peut être un peu complexe, alors n'hésitez pas en cas de problèmes à poster sur le forum.


Tutoriel réalisé par Toto456 pour Forumactif.