AdminbCe que tu veux comme texte
Messages : 230 Réputation : 0 Date d'inscription : 12/06/2009 Umore : &
En savoir plus sur moi test: | Sujet: 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. |
|