Bannière aléatoire ou défilante

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Bannière aléatoire ou défilante

Message par Threax le Sam 14 Fév 2009 - 17:44

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.


Mise en place :

    Panneau d'administration
    Modules
    HTML & JAVASCRIPT - Gestion des codes Javascript
    Créer un nouveau javascript

    Paramètrez les champs ainsi :

    Titre : bannière aléatoire
    Placement : Sur toutes les pages

    Ensuite il faudra mettre dans la zone de script, ce script si vous voulez une bannière aléatoire sans défilement :

    Code:
    $(function() {

      var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];

      $("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])

    });
    Et ce script si vous voulez un défilement toutes les 7 secondes :

    Code:
    $(function() {

      var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];
       
      b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,7*1000);

    });
    ( il faut changer le 7 pour changer le nombre de seconde )

    Pour modifier les images il faut modifier la ligne "var b" en changeant le tableau et gardant une structure ["http://...","http://...","http://..."].

    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. Wink


Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum