Bonjour à tous
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 HostPour 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 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
Par exemple :
| Spoiler: |
| | | Code: | jQuery().ready(function(){ var bann = new Array (); // on donne les liens de chaque bannière bann[0] = "http://i55.tinypic.com/212c0us.jpg"; bann[1] = "http://i912.photobucket.com/albums/ac325/Miettes_SoP/sp/bann.png"; bann[2] = "http://i754.photobucket.com/albums/xx188/School_of_pub/ete_2010/bann.png"; var i = Math.floor(3*Math.random()); document.getElementById("bann").innerHTML = "<a href=\"http://test-miettes.exprimetoi.net/\"><img src=\""+bann[i]+"\" alt=\"mon forum\" border=\"0\"></a>"; }); |
|
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 :
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' 
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à Le tour est joué ^^
Si vous avez des questions, je ne suis pas loin
