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

[Zen]

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 , si celui-ci apparaît. ► Si c'est qui est affiché, ne cliquez pas 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. Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

[Niten]

Excellent tutoriel.

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.

[Ea]

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.

[FANCH 56]

Bonjour

Une question avant de me lancer.

Est-ce que ceci, ne ralentira pas les accès pages ?

[Ea]

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.

[OoelleoO]

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!

[fred71]

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

[Ea]

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.

[kensaif]

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 !

[Dyonisos]

Excellent tuto !!

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

Excellent...

[audrey851996]

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 ??

[Azusa-nakano]

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 ?

[Black Jaàfar]

merci bcp

[R8]

Quelqu'un peut me montrer un ex de ce que ca peut donner svp ?

[azalee 33]

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

[mde matos]

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/

[Lauranna]

bonjour! J'aimerais savoir si ce tuto marche ailleurs que sur le forum? Merci de vos réponses.

[FABIEN87]

J'ai beau essayé avec les différents mode et rien !!!

[R8]

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 ?

[mde matos]

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 .

[Ea]

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.

[R8]

Euh non la description n'est que sur l'index et pas sur toutes les pages du forum ?

Toujours aucun moyen de voir quelque part ce que ca donne ?

Sinon en activant le HTML pour le tuto, après on peut le désactiver, ou faut le laisser définitivement activé pour que ca marche ? Je demande parce que perso je suis pas très pro html.

[billy95]

bonjour à tous,

je ne comprend pas pourquoi le code ne fonctionne pas
j'ai pourtant suivi à la lettre les instruction mais le code html ne passe pas!

pouvez vous m'aider?

voici mon site: http://www.retro-next-game.com/

[@stra]

tres bon tuto
ça marche bien, merci
juste un truc, peux tu me donner le code pour inserer un lien
EXemple: je clique sur l'image, ça me renvoie sur la page d'un post particulier.

Merci

[Xélore]

Merci pour se super tuto =)

[Temps de danses]

Juste une petite précision, quand on parle de bannière aléatoire ou défilante est ce qu'il s"agit bien de la colonne qui apparait sur la gauche de l'écran avec par exemple : les derniers sujets, les sujets importants, ...

sinon me dire ou je peux avoir un tuto pour mettre tout cela à gauche comme sur ce site forum des forums.

[Euphoria]

Bonjour,
J'aurai une question par rapport à ce tuto. Est-il possible d'afficher les différentes bannières selon un ordre choisi et pas aléatoire ?