Testetana

- Salut Invité -
 
AccueilAccueil  PortailaaaPortailaaa  CalendrierCalendrier  GalerieGalerie  FAQFAQ  RechercherRechercher  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  
Avril 2018
LunMarMerJeuVenSamDim
      1
2345678
9101112131415
16171819202122
23242526272829
30      
CalendrierCalendrier

Partagez | 
 

 Javascript : calendrier de l'avant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Adminb
Ce que tu veux comme texte
avatar

Messages : 230
Réputation : 0
Date d'inscription : 12/06/2009
Umore : &

En savoir plus sur moi
test:

MessageSujet: Javascript : calendrier de l'avant   Jeu 3 Déc - 0:41

Bonjour,


Voilà le code d'un calendrier de l'avant que j'avais réalisé :

Code:
<style type="text/css">
  #advent_calendar {
      background-image:url(http://i46.tinypic.com/eh66t.png);
      width:456px;
      height:600px;
      position:relative;
  }
  #advent_calendar div {
      position: absolute;
      background-position: 0 0;
      display: none;
  }
  #advent_calendar div:hover {
      background: none;
  }
  #ac_d1 { background-image: url(http://i47.tinypic.com/28gti80.png); left: 134px; top: 197px; width: 49px; height: 61px;  }
  #ac_d2 { background-image: url(http://i45.tinypic.com/vmzuoj.png); left: 26px; top: 104px; width: 69px; height: 92px; }
  #ac_d3 { background-image: url(http://i48.tinypic.com/2qv3x9f.png);left: 248px; top: 478px; width: 43px; height: 72px; }
  #ac_d4 { background-image: url(http://i46.tinypic.com/wtej4k.png); left: 375px; top: 132px; width: 40px; height: 45px; }
  #ac_d5 { background-image: url(http://i50.tinypic.com/binn5y.png); left: 71px; top: 412px; width: 58px; height: 52px; }
  #ac_d6 { background-image: url(http://i46.tinypic.com/2agn2wx.png); left: 253px; top: 302px; width: 67px; height: 72px; }
  #ac_d7 { background-image: url(http://i47.tinypic.com/2q3c3rb.png); left: 61px; top: 54px; width: 39px; height: 39px; }
  #ac_d8 { background-image: url(http://i49.tinypic.com/1vpxz.png); left: 365px; top: 56px; width: 36px; height: 36px; }
  #ac_d9 { background-image: url(http://i48.tinypic.com/205w8r9.png); left: 367px; top: 402px; width: 45px; height: 47px; }
  #ac_d10 { background-image: url(http://i49.tinypic.com/foooyo.png); left: 62px; top: 493px; width: 60px; height: 55px; }
  #ac_d11 { background-image: url(http://i45.tinypic.com/2u5rw2p.png); left: 351px; top: 304px; width: 50px; height: 62px; }
  #ac_d12 { background-image: url(http://i46.tinypic.com/33dh9bs.png); left: 46px; top: 215px; width: 62px; height: 72px; }
  #ac_d13 { background-image: url(http://i48.tinypic.com/2iw28sx.png); left: 245px; top: 25px; width: 54px; height: 62px; }
  #ac_d14 { background-image: url(http://i49.tinypic.com/2wfu8ur.png); left: 127px; top: 485px; width: 72px; height: 70px; }
  #ac_d15 { background-image: url(http://i47.tinypic.com/x4r9jq.png); left: 159px; top: 97px; width: 68px; height: 71px; }
  #ac_d16 { background-image: url(http://i49.tinypic.com/210dj41.png); left: 375px; top: 506px; width: 68px; height: 59px; }
  #ac_d17 { background-image: url(http://i49.tinypic.com/2411lw1.png); left: 379px; top: 175px; width: 55px; height: 92px; }
  #ac_d18 { background-image: url(http://i45.tinypic.com/1jb7kw.png); left: 39px; top: 313px; width: 45px; height: 62px; }
  #ac_d19 { background-image: url(http://i48.tinypic.com/aujf38.png); left: 158px; top: 29px; width: 50px; height: 62px; }
  #ac_d20 { background-image: url(http://i48.tinypic.com/33mbeo8.png); left: 270px; top: 239px; width: 46px; height: 46px; }
  #ac_d21 { background-image: url(http://i45.tinypic.com/rw30pe.png); left: 126px; top: 302px; width: 68px; height: 61px; }
  #ac_d22 { background-image: url(http://i48.tinypic.com/2n5100.png); left: 239px; top: 129px; width: 50px; height: 70px; }
  #ac_d23 { background-image: url(http://i46.tinypic.com/ndlkjt.png); left: 139px; top: 411px; width: 68px; height: 44px; }
  #ac_d24 { background-image: url(http://i47.tinypic.com/2up70wh.png); left: 277px; top: 428px; width: 32px; height: 32px; }
  #ac_d25 { background-image: url(http://i46.tinypic.com/2itj52s.png); left: 130px; top: 190px; width: 252px; height: 189px; }
</style>
<div id="advent_calendar"><div id="ac_d1"></div><div id="ac_d2"></div><div id="ac_d3"></div><div id="ac_d4"></div><div id="ac_d5"></div><div id="ac_d6"></div><div id="ac_d7"></div><div id="ac_d8"></div><div id="ac_d9"></div><div id="ac_d10"></div><div id="ac_d11"></div><div id="ac_d12"></div><div id="ac_d13"></div><div id="ac_d14"></div><div id="ac_d15"></div><div id="ac_d16"></div><div id="ac_d17"></div><div id="ac_d18"></div><div id="ac_d19"></div><div id="ac_d20"></div><div id="ac_d21"></div><div id="ac_d22"></div><div id="ac_d23"></div><div id="ac_d24"></div><div id="ac_d25"></div></div><script type="text/javascript">var december1=  new Date(2009,11,01); var today= new Date(); nb_days=(today-december1)/86400000; var count=0; while(count<=nb_days && count <25)  document.getElementById('ac_d'+(++count)).style.display='block'; </script>
Cordialement.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

Javascript : calendrier de l'avant

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Testetana :: Script :: Javascript-