Header
Partagez | 

[forumactif][Template/Javascript] Bannière aléatoire

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [forumactif][Template/Javascript] Bannière aléatoire   Dim 3 Juil - 13:27

Bonjour à tous Smile

Dans ce tutoriel, je vous propose d'apprendre à changer l'image de votre bannière à chaque réactualisation de page.

Asseyez-vous, ouvrez vos yeux et c'est partie ^^

Pré-requis :
-> votre forum doit être en phpbb2
-> vous devez avoir accès au template

Pour faire ceci, on va utiliser du javascript. Rassurez vous, je vais tout vous expliquer ^^

Le javascript



1/ On va commencer par dire au javascript : "tu fonctionnes dès qu'on charge la page"

Code:
jQuery().ready(function(){

2/ On va créer un tableau (array en javascript) qui contiendra nos différentes bannières. On va appeler ce tableu "bann"

Code:
var bann = new Array ();

3/ Chaque case de notre tableau va contenir un lien image. Une case se représente ainsi en javascript nom_du_tableau[num_de_la_case] et on commence toujours à compter à partir de 0 Smile On oublie pas aussi le ; qui valide le code ^^ (comme la touche "entrée" de ton clavier)

Code:
bann[0]="lien1";
bann[1]="Lien2";
bann[2]="lien3";

4/ On va tirer au sort une case de ce tableau et on va mettre ce numéro de case dans une variable qu'on va appeler i

Code:
var i = Math.floor(N*Math.random());

Ici, il ne faut pas oublié de remplacer N par le nombre de case ^^

5/ On va afficher le contenu de la case

Code:
document.getElementById("bann").innerHTML = "<a href=\"lien_du_forum\"><img src=\""+bann[i]+"\" alt=\"mon forum\" border=\"0\"></a>";

6/ On ferme le code

Code:
});

Par exemple :

Spoiler:
 

Je place le code sur mon forum



1/ On va aller dans PA >> module >> gestion des pages javascript. Là vous créez un nouveau js, vous lui donnez un nom et vous cocher "sur toutes les pages", puis vous copiez collez le code fait plus haut

2/ On va ensuite aller dans le template "overall_header". Repérez ceci :

Code:
</head>

et collez juste avant :

Code:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Idea N'oubliez pas de publier votre template Wink

J'affiche la bannière



Notre dernière manip' Very Happy

1/ On va ouvrir le template "overall_header"

2/ On repère ça :

Code:
<!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     

                     <!-- END switch_logo_center -->

Et on le remplace par

Code:
<!-- BEGIN switch_logo_center -->
                     <div id="bann"></div>
                     

                     <!-- END switch_logo_center -->

On valide et on oublie pas de publier.

Et voilà Smile Le tour est joué ^^

Remarque : ici, le script fonctionnera uniquement si votre logo (bannière) est centrée.




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[forumactif][Template/Javascript] Bannière aléatoire
Page 1 sur 1
 Sujets similaires
-
» Header aléatoire
» Bannière aléatoire
» Dépôt de bannière défilante
» [Resolu] Bannière avec lien dans une signature
» Bannière Mister Matt
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+