Header

Partagez | 

[forumactif]Défilement header

Message Sujet: [forumactif]Défilement header   Mer 29 Juin - 12:09

avatar

Mes clubs

Invité

Invité
Bonjour,

Alors j'aurais une question, j'aimerais mettre en place sur mon forum plusieurs headers qui défilent aléatoirement (le header change soit à chaque chargement de page soit après un certain nombre de secondes je sais pas ce qui est possible) Je sais que ça existe mais je ne sais pas du tout comment m'y prendre et je n'ai pas trouvé de tuto ici qui m'explique comment faire

Merci par avance pour votre aide
Revenir en haut Aller en bas

Message Sujet: Re: [forumactif]Défilement header   Mer 29 Juin - 14:22

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Coucou 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].

Je déconseille le changement de header après N secondes ^^ En effet, tu vas faire tourner constamment un script sur la page ce qui fait que cela va ralentir celle-ci.

En revanche, pour le chargement à chaque actualisation, c'est possible ^^ Et pour cela, on va utiliser du javascript ^^ Rassure toi, je vais tout d'expliquer Smile

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 html. Là tu crées une nouvelle page, tu lui donnes un nom et tu laisses tout sur nom, puis tu copies colle le code fait plus haut

2/ On va ensuite aller dans : Pa >> général >> Promotion du forum >> les moteurs de recherches >> balise supplémentaires On va cliquer sur le petit + et on va ajouter 2 feuilles javascript :
-> le lien de la page que tu viens de créer
-> et celui ci : http://code.jquery.com/jquery-1.4.2.min.js

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é ^^ Si tu as des questions, je suis là Smile
Revenir en haut Aller en bas


[forumactif]Défilement header
Page 1 sur 1
 Sujets similaires
-
» Enlever cadre à l'entete
» Fond ne defile pas
» Barre de défilement
» Header de Fond Parfait
» Défilement horizontal
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