Créer une bannière aléatoire ou défilante pour son forum

Zen à 10h06
06
Apr
2011
Créer une bannière aléatoire ou défilante


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. Wink


Tutoriel réalisé par Toto456 pour Forumactif.
Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.
Répondre
1 Niten, le 06/04/2011 à 10h17
Excellent tutoriel. thumright

Pour avoir utilisé cet effet, je me permet juste de préciser qu'il est préférable que les bannières soient exactement au même format afin d'éviter les sautes désagréables sur une page d'accueil.
2 Ea, le 06/04/2011 à 13h02
Ouip en effet ^^


Il y aurait moyen de redimensionner l'image à la même taille que la précédente mais vu qu'on se fierait au redimensionnement du navigateur, suivant quel navigateur c'est ça donnerait quelque chose de bien ou de bof, enfin autant avoir des images de la même taille au départ ( il y a aussi moyen de mettre du transparent autour d'une des bannières par un logiciel d'édition d'image si elle est trop petite ).

Cordialement.
3 FANCH 56, le 07/04/2011 à 08h19
Bonjour

Une question avant de me lancer.

Est-ce que ceci, ne ralentira pas les accès pages ?
4 Ea, le 07/04/2011 à 08h59
Le code est assez court ( même si souvent un long code ne ralentira pas forcément l'accès non plus ) et en plus normalement le navigateur pourrait le mettre en cache, donc ne télécharger qu'une fois la page du code et puis utiliser la page dans le cache ( sur l'ordinateur donc ) les prochaines fois.

Cordialement.
5 OoelleoO, le 09/04/2011 à 18h11
Merci pour le tuto!!
Mais est-il possible de changer de bannière automatiquement en fonction de l'heure dans la journée (au lieu d'un changement aléatoire)? Pour PunBB!
6 fred71, le 10/04/2011 à 15h08
Bonjour,
j'ai essayé de suivre le tuto, mais quand j'arrive au bout, il ne se passe pas grand chose sur ma page d'accueil. En fait, ma bannière actuelle disparait mais celle que je veux mettre n'apparait pas.
Y a-t-il une option à cocher quelque par pour activer ?
Merci
7 Ea, le 10/04/2011 à 15h35
Bonjour,


@ooelleoo : cela doit être réalisable il faudrait demander dans l'entraide ^^

@fred71 : cela doit fonctionner comme cela, il faudrait exposer votre problème dans la section d'entraide.

Cordialement.

8 kensaif, le 16/04/2011 à 01h56
slt ben c est compliquer le systeme pour mettre des videos ou un tchat box pour tchater en ligne il ya pas un truc plus simple ? merci !
9 Dyonisos, le 16/04/2011 à 15h13
Excellent tuto !!

Avec un peu d'imagination, de beaux effets sont possibles...

Excellent...
10 audrey851996, le 17/04/2011 à 00h38
bonjours, moi j'ai un probleme...

je ne trouve pas ceci:
► Modules
► HTML - Gestion des pages HTML
► Créer une nouvelle page HTML

et sinon, si je veux juste changer le "header" du haut, je fais comment ??
11 Azusa-nakano, le 17/04/2011 à 17h15
C'est simple Audrey il faut que tu mettes la version avancé . Et en faîtes c'est quoi les images de ça :
► Cliquez sur , si celui-ci apparaît.
► Si c'est qui est affiché, ne cliquez pas
Bah la en haut normalement il y a des images mais c'est quoi ?
12 Black Jaàfar, le 17/04/2011 à 23h51
merci bcp Very Happy
13 R8, le 19/04/2011 à 13h25
Quelqu'un peut me montrer un ex de ce que ca peut donner svp ?
14 azalee 33, le 21/04/2011 à 19h54
206cclover a écrit:Quelqu'un peut me montrer un ex de ce que ca peut donner svp ?


oui cela donnerait un apercu car je vois pas tres bien l'effet que cela peut donner
15 mde matos, le 23/04/2011 à 06h24
Jai bien esseyer. mais rien ne se passe , la bannierre defilante c'est la meme chose qu'une Annonce? ou bien ,
car jai mis en page d'acceuil annonce foto defilante

quelqun a il dejas esseyer si possible montre modele .
je vous met le lien du mien
http://lesamisduquad.forumactif.com/
16 Lauranna, le 23/04/2011 à 08h58
bonjour! J'aimerais savoir si ce tuto marche ailleurs que sur le forum? Merci de vos réponses.
17 FABIEN87, le 29/04/2011 à 18h15
J'ai beau essayé avec les différents mode et rien !!!
18 R8, le 03/05/2011 à 17h18
mde matos a écrit:Jai bien esseyer. mais rien ne se passe , la bannierre defilante c'est la meme chose qu'une Annonce? ou bien ,
car jai mis en page d'acceuil annonce foto defilante

quelqun a il dejas esseyer si possible montre modele .
je vous met le lien du mien
http://lesamisduquad.forumactif.com/

Bah t'as réussi non ?
19 mde matos, le 03/05/2011 à 17h57
206cclover a écrit:
mde matos a écrit:Jai bien esseyer. mais rien ne se passe , la bannierre defilante c'est la meme chose qu'une Annonce? ou bien ,
car jai mis en page d'acceuil annonce foto defilante

quelqun a il dejas esseyer si possible montre modele .
je vous met le lien du mien
http://lesamisduquad.forumactif.com/

Bah t'as réussi non ?



J ai reusi depuis pas mal de Temps , Mais ce n'est pas la meme chose qu on nous explique ci- Avant , moi ce que jai mis c'est dans Annonce tout simplement .
20 Ea, le 03/05/2011 à 20h35
Bonjour,


C'est pareil de mettre le script en annonce, mais vu que tout le monde n'utilise pas les annonces le tutoriel utilise la description qui elle est ( à moins de modification de template la supprimant ) sur toutes les pages de tout les forums.

Cordialement.
Sujets similaires
Le plus beau qeel
Harry Potter Pub lance son premier concours ! Il s'agit du plus beau "qui est en ligne". Si vous souhaitez participer, merci de remplir ce formulaire : Code:[b]Nom de votre forum :[/b] [b]Lien de votre publicité
crér un theme hitskin
Comment creer un theme hitskin ? Merci.
Une fiche de pub pour Jen.♥
Bonjouuuur.♥ Alors, je viens faire une ptite commande à mes Wayiens préférés.♥ Alors, je veux une fiche pub car prochainement je vais bientôt promouvoir un forum qui me tient à coeur et j'ai besoin de vous pour me faire un magnifique codage pour une
12
À voir aussi
more_less
Informations

26 Réponses pour le sujet :
"Créer une bannière aléatoire ou défilante pour son forum"

Ce sujet a été vu 11059 fois.

Dernier message écrit :
06/04/2011 à 10h06 par "Zen"