1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Bloquer les jours d'un calendrier de l'avent

Signaler
Messages postés
2
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
8 novembre 2014
 -
Messages postés
31035
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
 -
Bonjour à tous,

Je me débrouille en CSS et HTML... mais je n'ai jamais appris alors j'ai BEAUCOUP de lacunes. Bref, je bidouille.
J'ai eu envie de m'attaquer à un nouveau projet.

J'ai intégré un calendrier de l'avent sur une page de mon blog.
J'aimerais que, par exemple, le 1er décembre, seule soit cliquable la case 1.
Le 2, les cases 1 et 2 cliquables... le 3, les cases 1,2 et 3... etc.

Comment puis-je faire ?


Voici mon code :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Calendrier de l'avent 2014 !!</title>
<style type="text/css">
body{
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg') no-repeat top center;
background-size:100%;
}

div#calendrier{
width:600px;
height:400px;
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg') no-repeat top center;
position: relative;
left:0%;
top:0%;
}

.cadre{
width:80px;
height: 80px;
border:3px red solid;
margin-top:10px;
margin-left: 5px;
margin-right: 1px;
float:left;
text-decoration: none;
color:green;
font-family:georgia;
font-size: 30px
}

.cadre:hover{
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg');
color:red;
}
</style>
</head>
<body>
<div id="calendrier">

<!-- fenetre 1er decembre -->
<a href="http://www.untibebe.com/les-matins" class="cadre">1</a>

1
</a>

<!-- fenetre 2 decembre -->
<a href="" class="cadre">
2
</a>

<!-- fenetre 3 decembre -->
<a href="" class="cadre">
3
</a>

<!-- etc.. -->
<a href="" class="cadre">
4
</a>

<a href="" class="cadre">
5
</a>

<a href="" class="cadre">
6
</a>

<a href="" class="cadre">
7
</a>

<a href="" class="cadre">
8
</a>

<a href="" class="cadre">
9
</a>

<!-- fenetre 10 decembre -->
<a href="" class="cadre">
10
</a>

<a href="" class="cadre">
11
</a>

<a href="" class="cadre">
12
</a>

<a href="" class="cadre">
13
</a>

<a href="" class="cadre">
14
</a>

<!-- fenetre 15 decembre -->
<a href="" class="cadre">
15
</a>

<a href="" class="cadre">
16
</a>

<a href="" class="cadre">
17
</a>

<a href="" class="cadre">
18
</a>

<a href="" class="cadre">
19
</a>

<a href="" class="cadre">
20
</a>

<a href="" class="cadre">
21
</a>

<a href="" class="cadre">
22
</a>

<a href="" class="cadre">
23
</a>

<!-- fenetre 24 decembre -->
<a href="" class="cadre">
24
</a>




</div>
</body>
</html>
Afficher la suite
A voir également:

3 réponses

Réponse 1 / 3

pourquoi faire ?
Signaler
Messages postés
2
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
8 novembre 2014
En fait, je mets en place des partenariats avec des marques qui offrent des bons de reduction, etc... chaque jour est censé renvoyer à un de mes articles où le partenariat est décrit
Réponse 2 / 3
Messages postés
16152
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
15 janvier 2021
 106
Bonjour,

N'importe qui pourra ouvrir le code HTML ou JS de la page pour voir les autres cases, voire mettre son navigateur en mode debug (F12) pour modifier le DOM et afficher les cases cachées.

Le seul truc vraiment sûr c'est de changer le contenu de la page tous les jours sur le serveur pour ne mettre qu'une case chaque jour.La confiance n'exclut pas le contrôle
Réponse 3 / 3
Messages postés
31035
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 janvier 2021
 342
L'idéale serait de le faire avec du PHP .. car comme te l'ont indiqués les autres... en Javascript/html uniquement.. il sera facile à n'importe quel utilisateur de faire afficher tes cases et passer outre ton code javascript....


Répondre Posez votre question