Bannière aléatoire ou défilante

[Toto456]

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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[0]='adresse_image_1'; banner[1]='adresse_image_2'; banner[2]='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[X]='adresse_image';" après la dernière ligne d'image ( ici img[2]='adresse_image_3'; ). ► Remplacer le X par le prochain numéro libre ► 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.

[Etana]

Transition fondu pour la bannière défilante

Informations : Cette partie du tutoriel concerne les bannières défilantes et permet de faire une transition en fondu entre les bannières. Néanmoins, cela entraîne qu'il faut que les bannières aient les mêmes dimensions. Code à insérer pour toute version : Code: /******** paramètres à modifier ********/ var temps_transition=2000; var niveaux_transition=20; var temps_affichage=500; var largeur_image='150px'; var hauteur_image='200px'; var version_forum='phpbb2'; /******** fin des paramètres à modifier ********/ var banner = new Array(); /******** listes des images à modifier ********/ banner[0]='image_1'; banner[1]='image_2'; banner[2]='image_3'; /******** fin de liste des images à modifier ********/ function change(link) { opn=1; decrease(); } function ch_opacity(object,opacity){object.style.opacity=(opacity/100); object.style.MozOpacity=(opacity/100);object.style.KhtmlOpacity=(opacity/100); object.style.filter='alpha(opacity='+opacity+')'; } function decrease() { if(opn<=niveaux_transition) { ch_opacity(i1,100-100*opn/niveaux_transition);ch_opacity(i2,100*opn++/niveaux_transition); setTimeout("decrease();",temps_transition/niveaux_transition); } else { while((temp=banner[Math.floor(Math.random()*banner.length)])==i2.src); i1.setAttribute("src",temp); i3=i1; i1=i2; i2=i3; setTimeout("change();",temps_affichage); } } var temp; if(version_forum=='punbb')var i1=document.getElementById('pun-logo').firstChild; else if(version_forum=='phpbb2')var i1=document.getElementById('i_logo'); else var i1=document.getElementById('logo').firstChild; ch_opacity(i1,100); i1.style.position='absolute'; i1.style.top=0; i1.style.left=0; i1.parentNode.style.position='relative'; i1.parentNode.style.display='block'; i1.parentNode.style.margin='auto'; i1.parentNode.style.width=largeur_image; i1.parentNode.style.height=hauteur_image; var i2=document.createElement("img"); ch_opacity(i2,0);i2.style.position='absolute'; while((temp=banner[Math.floor(Math.random()*banner.length)])==i1.src); i2.setAttribute("src",temp); i2.style.top=0; i2.style.left=0; i1.parentNode.appendChild(i2); opn=niveaux_transition+1; if(banner.length>1)setTimeout("change();",temps_affichage); Il faut enregistrer et insérer le script ainsi que faire la liste des images comme il est indiqué sur le post juste au dessus Pour les autres paramètres, voici ce à quoi ils correspondent : temps_transition : c'est l'intervalle de temps pendant lequel une image est remplacée. niveaux_transition : c'est le nombre d'étape qu'il doit y avoir pour passer d'une image à l'autre. temps_affichage : c'est le temps que reste une image avant d'être changée. largeur_image : c'est la largeur des images. hauteur_image : c'est la hauteur des images. version_forum : c'est la version du forum cela peut-être phpbb2, phpbb3, punbb ou bien invision.

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Etana. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.