Rechercher
 
 

Résultats par :
 


Rechercher Recherche avancée

Créer un forum
Créer un forum
Derniers sujets
» Cherche code HTML
Aujourd'hui à 9:12 par Etana

» Gros problème de connection pour un membre du luxembourg
Aujourd'hui à 9:09 par Nanou89

» annulation de la publicité sur mon forum
Aujourd'hui à 9:05 par benn083210

» problème d'affichage
Aujourd'hui à 9:04 par Final-Blond

» comment envoyer des MP aux nouveaux membres
Aujourd'hui à 9:03 par Etana

» Encore la lenteur
Aujourd'hui à 9:00 par Darkaprincesse

» [Gros Probleme] J'ai plus rien sur mon forum :o
Aujourd'hui à 9:00 par Etana

» Beaucoup de lenteur.
Aujourd'hui à 8:59 par olkev

» Comment sera la fin du monde ???
Aujourd'hui à 8:56 par symetrix

Flux RSS

Yahoo! 
Google Reader 
MSN 
AOL 
NewsGator 
Rojo 
Bloglines 


Marque-page social

  http://illiweb.com/fa/social_bookmarking/digg.gif   http://illiweb.com/fa/social_bookmarking/delicious.gif   http://illiweb.com/fa/social_bookmarking/reddit.gif   http://illiweb.com/fa/social_bookmarking/stumbleupon.gif   http://illiweb.com/fa/social_bookmarking/slashdot.gif   http://illiweb.com/fa/social_bookmarking/furl.gif   http://illiweb.com/fa/social_bookmarking/yahoo.gif   http://illiweb.com/fa/social_bookmarking/google.gif   http://illiweb.com/fa/social_bookmarking/blinklist.gif   http://illiweb.com/fa/social_bookmarking/blogmarks.gif   http://illiweb.com/fa/social_bookmarking/technorati.gif 

Conservez et partagez l'adresse de Forum gratuit : Le forum des forums actifs sur votre site de social bookmarking

Qui est en ligne ?
Il y a en tout 250 utilisateurs en ligne :: 41 Enregistrés, 1 Invisible et 208 Invités :: 2 Moteurs de recherche

-Méphisto-, adam_sfp, anne, benn083210, Bridget, Caline-08, citron, cocofeye, Darkaprincesse, enjauge, Etana, Fadette, FANCH 56, Final-Blond, froogy, gigim, Hellcat, istevan, jenyfer55, Kadou, La Laude, Le-Piaf, Master-urban, missx, Monette69, Montainer, Mymymy, Nanou89, nessyman, Nilana, olkev, Satamania, superpepette, symetrix, tatiecathy, Typlo, Valentine Jasper, vanou77, yagoubi, yoyo 76, Zen

[ Voir toute la liste ]


Le record du nombre d'utilisateurs en ligne est de 1264 le Mar 26 Fév - 16:26

Bannière aléatoire ou défilante

Poster un nouveau sujet   Répondre au sujet

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

Tutoriel Bannière aléatoire ou défilante

Message par Toto456 le Sam 14 Fév - 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.


Étape 1 : Créer une page HTML :


    Panneau d'administration
    Modules
    HTML - Gestion des pages HTML
    Créer une nouvelle page HTML

    Paramètrez les champs ainsi :

    Titre : bannière aléatoire
    Voulez-vous utiliser le haut et le bas de page de votre forum ? Non
    Utiliser cette page en tant que page d'accueil ? Non


      Dans la zone de texte Code HTML :

      Cliquez sur -html , si celui-ci apparaît.
      Si c'est +html qui est affiché, ne cliquez pas Wink


    Ensuite il faudra mettre dans la zone texte, le code approprié à votre version, parmis les codes de l'étape 2.


Étape 2 - Punbb : Le script à insérer :


    Code sans défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

    Code avec défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

    setInterval("document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

    (il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière)


Étape 2 - Invision et Phpbb3 : Le script à insérer :


    Code sans défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];


    Code avec défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];

    setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

    (il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière)


Étape 2 - Phpbb2 : Le script à insérer :


    Code sans défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];


    Code avec défilement de bannières :

    Code:
    var banner = new Array();

    banner[0]='adresse_image_1';
    banner[1]='adresse_image_2';
    banner[2]='adresse_image_3';

    document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];

    setInterval("document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];",3000);

    (il faut changer le 3000 (= 3 secondes) pour changer la période entre chaque bannière )


    Pour ajouter une image dans toute les versions il faut :
    Ajouter une ligne "banner[X]='adresse_image';" après la dernière ligne d'image ( ici img[2]='adresse_image_3'; ).
    Remplacer le X par le prochain numéro libre
    Remplacer le adresse_image par l'url de la prochaine image des images devant apparaître aléatoirement.


Étape 3 : Lier le script à la page :


      Panneau d'administration
      Général
      Forum | Configuration
      Description du site


    Il suffit ensuite d'ajouter dans la description du site :

    Code:
    <script type='text/javascript' src='url_de_la_page_html'></script>

    En remplaçant url_de_la_page_html par l'adresse de la page que vous avec créé plus haut.

    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


Tutoriel réalisé par Toto456 pour Forumactif.
Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

-----------: Staff ForumActif :-----------


Toto456
Aidactif
Aidactif

Masculin
Nombre de messages: 6844
Points: 7647
Date d'inscription: 27/08/2005
Niveau d'alerte: Aucun avertissement

Voir le profil de l'utilisateur http://lesforumsde.forumactif.com

Revenir en haut Aller en bas

Tutoriel Re: Bannière aléatoire ou défilante

Message par Etana le Mar 29 Sep - 11:42

Transition fondu pour la
bannière défilante


Informations :

Cette partie du tutoriel concerne les bannières défilantes et permet de faire une transition en fondu entre les bannières. Néanmoins, cela entraîne qu'il faut que les bannières aient les mêmes dimensions.


Code à insérer pour toute version :

    Code:
    /******** paramètres à modifier ********/
    var temps_transition=2000;
    var niveaux_transition=20;
    var temps_affichage=500;
    var largeur_image='150px';
    var hauteur_image='200px';
    var version_forum='phpbb2';
    /******** fin des paramètres à modifier ********/

    var banner = new Array();

    /******** listes des images à modifier ********/
    banner[0]='image_1';
    banner[1]='image_2';
    banner[2]='image_3';
    /******** fin de liste des images à modifier ********/

    function change(link) { opn=1; decrease(); } function ch_opacity(object,opacity){object.style.opacity=(opacity/100); object.style.MozOpacity=(opacity/100);object.style.KhtmlOpacity=(opacity/100); object.style.filter='alpha(opacity='+opacity+')'; } function decrease() { if(opn<=niveaux_transition) { ch_opacity(i1,100-100*opn/niveaux_transition);ch_opacity(i2,100*opn++/niveaux_transition); setTimeout("decrease();",temps_transition/niveaux_transition); } else { while((temp=banner[Math.floor(Math.random()*banner.length)])==i2.src); i1.setAttribute("src",temp); i3=i1; i1=i2; i2=i3; setTimeout("change();",temps_affichage); } } var temp; if(version_forum=='punbb')var i1=document.getElementById('pun-logo').firstChild; else if(version_forum=='phpbb2')var i1=document.getElementById('i_logo'); else var i1=document.getElementById('logo').firstChild; ch_opacity(i1,100); i1.style.position='absolute'; i1.style.top=0; i1.style.left=0; i1.parentNode.style.position='relative'; i1.parentNode.style.display='block'; i1.parentNode.style.margin='auto'; i1.parentNode.style.width=largeur_image; i1.parentNode.style.height=hauteur_image; var i2=document.createElement("img"); ch_opacity(i2,0);i2.style.position='absolute'; while((temp=banner[Math.floor(Math.random()*banner.length)])==i1.src); i2.setAttribute("src",temp); i2.style.top=0; i2.style.left=0; i1.parentNode.appendChild(i2); opn=niveaux_transition+1; if(banner.length>1)setTimeout("change();",temps_affichage);

    Il faut enregistrer et insérer le script ainsi que faire la liste des images comme il est indiqué sur le post juste au dessus Wink

    Pour les autres paramètres, voici ce à quoi ils correspondent :

    • temps_transition : c'est l'intervalle de temps pendant lequel une image est remplacée.

    • niveaux_transition : c'est le nombre d'étape qu'il doit y avoir pour passer d'une image à l'autre.

    • temps_affichage : c'est le temps que reste une image avant d'être changée.

    • largeur_image : c'est la largeur des images.

    • hauteur_image : c'est la hauteur des images.

    • version_forum : c'est la version du forum cela peut-être phpbb2, phpbb3, punbb ou bien invision.


Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Etana.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

-----------: Staff ForumActif :-----------

Info
> FAQ
> Astuces
Sécurité
> Consignes
> Mail fondation

Etana
Aidactif
Aidactif

Masculin
Nombre de messages: 6512
Points: 8394
Date d'inscription: 04/04/2008
Niveau d'alerte: Aucun avertissement

Voir le profil de l'utilisateur http://www.gyaboo.org

Revenir en haut Aller en bas

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