Header

Partagez | 

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

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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 :
-> vous devez avoir accès au template
-> vous devez avoir un compte sur archives Host

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 commencer par enregister notre code javascript dans un document texte que l'on va appeler "bann_aleatoire.js" (attention, enregistrez bien en .js). Ensuite, hébergez ce fichier sur archives-host

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><script src="lien_de_la_page_js"></script>

En remplaçant "lien_de_la_page_js" par le lien du javascript que vous trouverez en cliquant sur "information"

Spoiler:
 

J'affiche la bannière



Notre dernière manip' Very Happy

1/ On va rester dans le template "overall_header"

2/ On repère ça :

Code:
<a href="{U_INDEX}"><img src="http://img6.xooimage.com/files/l/o/logo-b2c4b.png" border="0" alt="{L_INDEX}" vspace="1" /></a>

Et on le remplace par

Code:
<div id="bann"></div>

On valide.

Et voilà Smile Le tour est joué ^^

Si vous avez des questions, je ne suis pas loin Smile




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
[Xooit][Template/Javascript] Bannière aléatoire
Page 1 sur 1
 Sujets similaires
-
» Bannière aléatoire
» Problème "tuto Bannière aléatoire "
» javascript bannière aléatoire inopérant ...
» Script bannière aléatoire
» Problème de défilement d'images sur bannière aléatoire.
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens