Intégrer ici une courte prez' du fofo (âge limite, type de forum...)

Liens utiles

Factions

Eternia 1 x ...
Ethernam 2 x ...
Meute de Vitaly 3 x ...
Le Dédales x ...

Rumeurs

-Le vampire pervers-
Un vampire aurait comme passe temps d'entrer dans les dortoirs des filles pour voir Aiz ! La pauvre serait même observée par lui à travers la fenêtre.
-Cat and furious-
On connais enfin l'origine du grabuge en ville, le directeur s'est trouvé une nouvelle passion. Conduire des voitures à plus de 180 km/h en pleine ville ! Ce chat est complètement fou !

Membres du mois



La communauté du RP et du jeu.
 
Adsence

Partagez | 
 

 Bannière et image de fond changeant celons le moment de la journée

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
Responsable communautaire
Groupe RP : 219
Sexe : Masculin Terra : 8582
MessageSujet: Bannière et image de fond changeant celons le moment de la journée   Mar 21 Fév - 11:17

Comme vous pourrez le voir sur notre forum. L'image de fond et notre bannière change celons le moment de la journée. Au matin, elle nous montre un levé du soleil, au midi, une belle journée éclatante, en fin de journée, un couché de soleil et au soir, une jolie nuit au ciel étoilé.

Je vais vous partager les codes et les astuces dont j'ai dû faire usage pour faire en sorte que cela arrive.

L'installation de ces codes vont se faire par deux étapes.

Commençons par la première étape !

l1 : Les Widget.

Attention, pour ce qui est des Widgets je pars du principe que vous savez déjà comment installer des Widgets sur votre forum ou que vous avez lu le tutoriel dans notre forum expliquant comment les installer.

Si vous ne savez pas comment faire, je vous invite à lire ce tutoriel :

http://excidius-rpg.forumactif.com/t85-installer-des-widgets-sur-le-forum

Dans Panneau d'administration => Module => Widgets du forum.

Créez un nouveau Widget personnalisé et collez-y ce code :

Code:
<script language="javascript">
var ladate=new Date()
var h=ladate.getHours();
if (h>=11 && h<17) {document.write('<img style="width:100px; height: 100px;" src="http://i37.servimg.com/u/f37/18/68/48/61/day10.jpg" \>');}

  if (h>=17 && h<19) {document.write('<img style="width:100px; height: 100px;" src="http://i37.servimg.com/u/f37/18/68/48/61/sunset10.jpg" \>');}

 if (h>=19 || h<5) {document.write('<img style="width:100px; height: 100px;" src="http://i37.servimg.com/u/f37/18/68/48/61/night10.jpg" \>');}

 if (h>=5 && h<11) {document.write('<img style="width:100px; height: 100px;" src="https://i37.servimg.com/u/f37/18/68/48/61/mornin10.jpg" \>');}

</script>  

Ce code est essentiel, c'est lui qui décide à quel moment la bannière et l'image de fond changera. Bien entendu, ces images s'affichent sur presque toutes les pages, un tutoriel pour changer la mise en page de ce Widget ou pour masquer le Widget pourra être mis en place sur demande dans la partie Réclamation du forum.

Ensuite, vous devez placer le Widget personnalisé sur votre page d'accueil.

Maintenant, passons à la dernière étape.

.l Gestion des codes Javascript.

Pour la dernière étape, il faut se rendre dans :

Panneau d'administration => Module => Gestion des codes Javascript.

Créez un nouveau code Javascript et collez ceci :

Code:
$(document).ready(function() {
   if($('img[src="http://i37.servimg.com/u/f37/18/68/48/61/day10.jpg"]').length)/** Image en journée **/
     {
        $(function(){
          $("#pun-logo,#i_logo,#logo img").attr("src","http://i37.servimg.com/u/f37/18/68/48/61/day10.jpg");/** <= Url de la bannière **/
          $("body").css('background','url("https://images2.alphacoders.com/610/610776.png") no-repeat fixed'); /** <= Url de l'image de fond **/
        });
     }
   if($('img[src="http://i37.servimg.com/u/f37/18/68/48/61/sunset10.jpg"]').length || document.location.pathname=="excidius.forumactif.org")/**Image en fin de journée**/
     {
        $(function(){
          $("#pun-logo,#i_logo,#logo img").attr("src","http://i37.servimg.com/u/f37/18/68/48/61/sunset10.jpg");/** <= Url de la bannière **/
          $("body").css('background','url("http://www.animehdwallpapers.net/downloads/Sunset-SwordArtOnline-wallpaper-anime.jpg") no-repeat fixed'); /** <= Url de l'image de fond **/
        });
     }
  if($('img[src="http://i37.servimg.com/u/f37/18/68/48/61/night10.jpg"]').length || document.location.pathname=="excidius.forumactif.org")/** Image au soir **/
     {
        $(function(){
          $("#pun-logo,#i_logo,#logo img").attr("src","http://www.goodwp.com/large/201502/32278.jpg");/** <= Url de la bannière **/
          $("body").css('background','url("http://www.yoanu.com/wp-content/uploads/2015/03/anime-night-scene-wallpaper-amazing-photos-t7l0q3x2.jpg") no-repeat fixed'); /** <= Url de l'image de fond **/
        });
     }
  if($('img[src="https://i37.servimg.com/u/f37/18/68/48/61/mornin10.jpg"]').length || document.location.pathname=="excidius.forumactif.org")/** Image au matin **/
     {
        $(function(){
          $("#pun-logo,#i_logo,#logo img").attr("src","https://i37.servimg.com/u/f37/18/68/48/61/mornin10.jpg"); /** <= Url de la bannière **/
          $("body").css('background','url("http://goodnightpicturesimages.com/wp-content/uploads/2016/03/free-good-morning-wallpaper-download-dawn-anime.jpg") no-repeat fixed'); /** <= Url de l'image de fond **/
        });
     }
});


Ces indications :

Code:
/** <= Url de la bannière **/
Lui vous indique les liens des bannières à remplacer par celles que vous souhaitez qui apparaissent.

Code:
/** <= Url de l'image de fond **/
Lui vous indique les liens des images de fond à remplacer par les images que vous souhaitez qui apparaissent.

Enregistrez votre code Javascript et c'est bon.

En dernier recours, veuillez vous assurer que les codes Javascript sont bien activés sur votre forum.

Pour toutes question et autres, par rapport à ce tutoriel. Je vous invite à ouvrir un sujet dans la partie Réclamation du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://excidius-rpg.forumactif.com
 
Bannière et image de fond changeant celons le moment de la journée
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le phénix
» Votre Bureau, Montrez nous votre bureau de Geek
» Besoin d'aide pour découper une image avec fond invisible
» A l'eau ! Fuite à fond de cale !
» Fond d'écran Resident Evil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Excidius :: Index :: Tutoriel :: ForumActif :: Code avancés-
Sauter vers: