Faire apparaitre disparaitre une image en cliquant sur une autre

**bahh66** · 07/10/2022, 17h48

Bonjour, ce sujet fait suite à celui-ci affecter un événement une seule fois.

Je créé un petit jeu de questions réponses en cliquant sur une image. Je souhaite installer un radar pour que le joueur puisse voir les réponses déjà données.

Du coup, j'ai une image de radar et je souhaite qu'en cliquant dessus, une copie en dégradé de gris de l'image principale (ici fond.png) se superpose à l'image principale, puis qu'ne cliquant sur l'image en gris, on revienne au jeu.

Nom : Radar.jpg
Affichages : 253
Taille : 401,1 Ko

Nom : Radar.jpg
Affichages : 253
Taille : 401,1 Ko

Nom : NB.jpg
Affichages : 256
Taille : 268,2 Ko

**Archimède** · 07/10/2022, 18h37

Salut,
tu fais une bascule avec un boolean sur le click de ton image donc si vrai tu charges le src de l'image niveau de gris sinon l'autre... et le tour est joué.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bascule au click</title>
    <style>
        #bascule {
            position: absolute;
            left: 20%;
            top: 20%;
            width: 10%;
            height: 20%;
            cursor: pointer;
            background-color: red;
        }
    </style>
</head>
 
<body>
    <div id="bascule"></div>
    <script>
        let bascule = false;
        const mydiv = document.getElementById('bascule');
 
        mydiv.addEventListener('click', (e) => {
            bascule = !bascule;
            bascule ? e.currentTarget.style.backgroundColor = 'blue' : e.currentTarget.style.backgroundColor = 'red';
        });
    </script>
</body>

**bahh66** · 08/10/2022, 12h18

Bonjour,

alors j'ai un problème, j'ai du mal modifié et placé le code que tu as mis après l'avoir compris (où alors je l'ai mal compris)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
<head>
    <title>Jeu</title>
	<style>
        body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        font-family: 'Pacifico', cursive;
        }
 
        div {
                width: 100%;
        height: 100%;
        }
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }
    .container {
        color:#ffffff;
        font-size: 30px;
    
        }
    
        
    .svg-heart svg {
  --dim: 2em;
  width: var(--dim);
  height: var(--dim);
  fill: transparent;
  stroke: #000;
  stroke-width: .5;
}
.fill-heart {
  fill: #ff5e5e;
  stroke: #ff0000;
}    
        
        /* Bascule pour mettre en gris */
        
          #bascule {
            position: absolute;
            cursor: pointer;
        }
        
        
        
        
        
        
        
        
        
        
        </style>
 
</head>
<body>
 
 
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
            /* Bascule pour mettre en gris */
 
    <div id="bascule">
    <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">
</div>  
 
        <div class="container">    
<DIV STYLE="position:absolute; top:250; left:50">
       Score : <span id="champDuPrompt"></span>
        Vies : <span id="nbdevies"></span>
          <div class="svg-heart">
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
      </div>
</DIV>
 
</div>
 
 
   <img src="radar.png" width= "100" style="position:absolute;right: 0"> 
 
 
 
 
 
<!-- pour utilisation des coeurs -->
<svg style="display:none">
  <symbol viewBox="-1 0 22 20" id="empty-heart" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
  </symbol>
</svg>
 
 
<script>
 
let compt = 0;
let vie = 3;
 
 /**
 * function qui définie ce que l'on va faire au click sur un élément <area>
 */
function fonctionSurClic(e) {
  // récup. élément cliqué
  const elClicked = e.target;
  // demande faite à utilisateur
  const result = prompt("Entre le nom du jeu :" , "");
  // traitement cas où appui sur annuler
  if (null === result) return;
  // test réponse
  // si réponse OK, il faudrait faire peut-être plus de contrôle
  // comme minuscule/MAJUSCULE, enlever les espaces début et fin ...
  if (result === elClicked["dataset"]["nom"]) {
    let win;
      win="Bravo, c'était bien "+elClicked["dataset"]["nom"];
        // diffère l'affichage de la boîte alert
    setTimeout(() => alert(win), 100);  
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
  }
  // réponse nOK
  else {
    let msg;
    vie -= 1;
    // mise à jour affichage nbr vies
    setNbrVies(vie);
    document.getElementById("nbdevies").innerHTML = vie;
    // traitement résultat
    if (vie == 0) {
      msg = "GAME OVER";
    }
    else {
        if (vie!=1){msg = "Il ne vous reste plus que " + vie + " vies";}
        else {msg = "Il ne vous reste plus que " + vie + " vie";}
    }
    // diffère l'affichage de la boîte alert
    setTimeout(() => alert(msg), 100);
  }
}
    
/**
 * pour toutes les <area>
 * affectation événement au click
 */
const elementsArea = document.querySelectorAll("#zones_image area");
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});
    
//// et pour finir ////////////////////////////////////////////
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs pleins
setNbrVies(vie);
document.getElementById("nbdevies").innerHTML = vie;
document.getElementById("champDuPrompt").innerHTML = compt;
 
        /* Bascule pour mettre en gris */    
    
    let bascule = false;
        const mydiv = document.getElementById('bascule');
 
        mydiv.addEventListener('click', (e) => {
            bascule = !bascule;
            bascule ? e.currentTarget.style.filter = 'grayscale(100%)' : e.currentTarget.style.filter = 'grayscale(0%)';
        });
    
</script>
 
 
</body>
</html>

Alors j'ai mis le code en entier car je me demande s'il n'y a pas un conflit avec un autre appel de la fonction "click" pour les area.

Avec ce code, il n'y a plus rien qui fonctionne. J'ai mis <div id="bascule"> autour de l'image fond.png car c'est celle là qui dois changer au click sur radar.png.

Du coup j'ai fait un test en placant les balises <div id="bascule"> autour de l'image radar et là j'ai l'image du radar qui devient grise alors que je souhaite que ce soit l'image fond qui se grise.

**Archimède** · 08/10/2022, 12h49

le e.currentTarget est un pointeur vers la div et non vers l'image qui la contient.
Donc tu gardes le déclenchement de l'événement sur l'image radar et tu places id='bascule' plutôt dans img de fond.png
Si bien que dans la condition ternaire tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mydiv.style.filter = 'grayscale(100%)' : mydiv.style.filter = 'grayscale(0%)';

tu renommes mydiv autrement. (c'est une image...)

ça vient sans doute de là. Après je n'ai pas tout lu...

**bahh66** · 08/10/2022, 13h48

Envoyé par Archimède

le e.currentTarget est un pointeur vers la div et non vers l'image qui la contient.

Ca je pense que j'ai compris.

Envoyé par Archimède

Donc tu gardes le déclenchement de l'événement sur l'image radar et tu places id='bascule' plutôt dans img de fond.png

Comment? J'ai fait le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="bascule">
   <img src="radar.png" width= "100" style="position:absolute;right: 0"> 
</div>

Vu que le e.currenttarget pointe vers la div j'en ai mis une en essayant de l'identifier pour la bascule. Mais je crois que c'est n'importe quoi ce que j'ai fait.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <img id="bascule" usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">

Ici, j'ai identifié l'image comme étant la cible de la bascule.

Envoyé par Archimède

Si bien que dans la condition ternaire tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mydiv.style.filter = 'grayscale(100%)' : mydiv.style.filter = 'grayscale(0%)';

tu renommes mydiv autrement. (c'est une image...)

ça vient sans doute de là. Après je n'ai pas tout lu...

Alors là je comprends plus dans le post précédent, on définit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const mydiv=document.getElementBy Id('bascule')

du coup comment je renomme mydiv autrement. Et c'est pas une image, c'est une constante. (où alors c'est du sens figuré et ça prouve là aussi que j'ai rien compris.

**Archimède** · 08/10/2022, 14h10

Non, le fait de renommer mydiv en myimg (vu que tu fais référence à une image) serait plus judicieux, mais ça ne change rien. C'est un détail qui n'a aucune incidence sur le fonctionnement de l'événement.
Après si tu déclenches le addEventListener à partir de l'iimg (radar), ça devrait le faire....d'ailleurs, c'est ce que tu veux d'après ce que j'ai compris.
ça fonctionne ou pas ?

Snion, tu as la possibilité d'accéder aux enfants de ta div (qui contient pour toi ici l'image à modifier) avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.childNodes

qui représente un tableau (plutôt une liste) des enfants contenus dans celle-ci...
https://developer.mozilla.org/fr/doc...ode/childNodes

Enfin le fait de convertir ton image en niveaux de gris, n'est pas réversible, je pense (à vérifier)... du niveau de gris, tu ne reviendras pas à la couleur...

**bahh66** · 08/10/2022, 14h33

Non ca ne fonctionne pas en ayant mis

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="bascule" usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">

cela fait apparaitre une main (à la place de la flèche de la souris, donc j'imagine qu'il la rend cliquable) mais plus rien ne fonctionne, ni les map area, ni le radar que j'essaie de paramétrer.

code+exemple

**Archimède** · 08/10/2022, 18h43

Re,

Si tu mets ton imageradar gérant l'événement click, comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
tonimageradar.addEventListener('click', (e) => {
            bascule = !bascule;
            bascule ? mydiv.style.filter = 'grayscale(100%)' : mydiv.style.filter = 'grayscale(0%)';
        });

normalement, ça devrait faire la bascule du filter. Je ne trouve pas la variable javascript qui pointe sur l'image radar.

**Archimède** · 08/10/2022, 19h08

Je viens de voir où était ton image radar... Si on clique sur la cible, ça fonctionne... J'ai ajouté un identifiant 'radar' sur img de radar.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
 
<img id="bascule" usemap="#testmap" src="https://culturehumaniste66.ac-montpellier.fr/00_Continuite_peda/Fond.png" STYLE="position:absolute; top:250; left:50">
 
 
        <div class="container">    
<DIV STYLE="position:absolute; top:250; left:50">
       Score : <span id="champDuPrompt"></span>
        Vies : <span id="nbdevies"></span>
          <div class="svg-heart">
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
        <svg><use href="#empty-heart"></use></svg>
      </div>
</DIV>
 
 
<div>
   <img src="https://culturehumaniste66.ac-montpellier.fr/00_Continuite_peda/radar.png" width= "100" style="position:absolute;right: 0" id='radar'> 
</div>
 
 
 
 
<!-- pour utilisation des coeurs -->
<svg style="display:none">
  <symbol viewBox="-1 0 22 20" id="empty-heart" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
  </symbol>
</svg>
 
 
<script>
 
let compt = 0;
let vie = 3;
 
 /**
 * function qui définie ce que l'on va faire au click sur un élément <area>
 */
function fonctionSurClic(e) {
  // récup. élément cliqué
  const elClicked = e.target;
  // demande faite à utilisateur
  const result = prompt("Entre le nom du jeu :" , "");
  // traitement cas où appui sur annuler
  if (null === result) return;
  // test réponse
  // si réponse OK, il faudrait faire peut-être plus de contrôle
  // comme minuscule/MAJUSCULE, enlever les espaces début et fin ...
  if (result === elClicked["dataset"]["nom"]) {
    let win;
      win="Bravo, c'était bien "+elClicked["dataset"]["nom"];
        // diffère l'affichage de la boîte alert
    setTimeout(() => alert(win), 100);  
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
  }
  // réponse nOK
  else {
    let msg;
    vie -= 1;
    // mise à jour affichage nbr vies
    setNbrVies(vie);
    document.getElementById("nbdevies").innerHTML = vie;
    // traitement résultat
    if (vie == 0) {
      msg = "GAME OVER";
    }
    else {
        if (vie!=1){msg = "Il ne vous reste plus que " + vie + " vies";}
        else {msg = "Il ne vous reste plus que " + vie + " vie";}
    }
    // diffère l'affichage de la boîte alert
    setTimeout(() => alert(msg), 100);
  }
}
    
/**
 * pour toutes les <area>
 * affectation événement au click
 */
const elementsArea = document.querySelectorAll("#zones_image area");
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});
    
//// et pour finir ////////////////////////////////////////////
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs pleins
setNbrVies(vie);
document.getElementById("nbdevies").innerHTML = vie;
document.getElementById("champDuPrompt").innerHTML = compt;
 
        /* Bascule pour mettre en gris */    
    
    let bascule = false;
        const myImg = document.getElementById('bascule');
 
        document.getElementById('radar').addEventListener('click', () => {
            bascule = !bascule;
            bascule ? myImg.style.filter = 'grayscale(100%)' : myImg.style.filter = 'grayscale(0%)';
        });
    
</script>
 
 
</body>

**bahh66** · 08/10/2022, 20h20

En effet, cela fonctionne bien par contre, je ne peux plus cliquer sur les map areas (ecran good place... et angry birds).

Est ce que le fait d'avoir mis id=bascule dans l'image fond.png créé un conflit?

**Archimède** · 08/10/2022, 22h00

J'ai surtout l'impression que de modifier une image (ici avec filter) sur laquelle, on a associé une carte pose problème...
L'id sur une div container ne change rien...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="bascule">           
       <img usemap="#testmap" src="https://culturehumaniste66.ac-montpellier.fr/00_Continuite_peda/Fond.png" STYLE="position:absolute; top:250; left:50">
 </div>

**NoSmoking** · 09/10/2022, 12h07

Bonjour,

Envoyé par bahh66

ce sujet fait suite à celui-ci ...

la route risque d'être longue ...

Envoyé par Archimède

J'ai surtout l'impression que de modifier une image (ici avec filter) sur laquelle, on a associé une carte pose problème...

le seul « vrai problème » que l'on rencontre est le fait que l'usage d'une usemap désactive le gestionnaire onclick sur l'image dans les zones <area> et que cela empêche également la modification de l'aspect du curseur dans ces zones.

Concernant l'approche, j'ajouterais une class="img-disabled" au clic sur le radar et l’enlèverais au clic sur l'image ou sur les zones.

Exemple de CSS tout simple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.img-disabled {
  filter: grayscale(1);
}

Sur base d'une structure HTML comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="cadre-image">
  <!-- image fond de jeu -->
  <img id="img-fond" usemap="#testmap" src="image-de-fond.jpg">
  <!-- conteneur ou image -->
  <div id="img-radar"></div>
  <!-- bandeau de suivi -->
  <div id="play-state" class="container">
    Score : <span id="champDuPrompt"></span>
    Vies : <span id="nbdevies"></span>
    <div class="svg-heart">
      <svg><use href="#empty-heart"></use></svg>
      <svg><use href="#empty-heart"></use></svg>
      <svg><use href="#empty-heart"></use></svg>
    </div>
  </div>
</div>

... dans un premier temps création d'une fonction pour enable/disable l'image, pourquoi une fonction, pour pouvoir y mettre plusieurs actions à exécuter comme par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function setStateImageFond(on) {
  const imgRadar = document.getElementById("img-radar");
  const imgFond = document.getElementById("img-fond");
  const oSuivi = document.getElementById("play-state");
  if (on) {
    imgRadar.classList.remove("stop-animation");
    imgFond.classList.remove("img-disabled");
    oSuivi.style.display = "initial";
  }
  else {
    imgRadar.classList.add("stop-animation");
    imgFond.classList.add("img-disabled");
    oSuivi.style.display = "none";
  }
}

Maintenant comment utiliser cette fonction,
... tout d'abord pour le radar et pour l'image, hors zones <area> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
const imgFond = document.getElementById("img-fond");
imgFond.addEventListener("click", (e) => {
  // ici on réactive
  setStateImageFond(true);
});
const oRadar = document.getElementById("img-radar");
oRadar.addEventListener("click", (e) => {
  // ici on désactive
  setStateImageFond(false);
});

.. ensuite pour les zones <area>, il suffit de tester si l'image a class="img-disabled" présente, dans ce cas on fait un appel à setStateImageFond(true) et on quitte sinon déroulement normal de la fonction au clic.

Cela se traduit par la modification de la fonction fonctionSurClic comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function fonctionSurClic(e) {
  // récup. élément cliqué
  const elClicked = e.target;
  // d'une façon générique pour la recherche on ferait
  // const nomMap = elClicked.parentElement.name;
  // const imgFond = document.querySelector(`[usemap="#${nomMap}"`);
  // ou plus directement
  const imgFond = document.getElementById("img-fond");
  if (imgFond.classList.contains("img-disabled")) {
    // ici on réactive
    setStateImageFond(true);
    // et on quitte
    return;
  }
  // demande à utilisateur
  const result = prompt("Entre le nom du jeu :" , "");
  // ...
  // la suite du code
  // ...
}

Voilà sauf erreur, et si je n'ai rien oublié, cela devrait répondre à ton attente du moment !

**bahh66** · 09/10/2022, 15h52

Bonjour NoSmoking,

la route risque d'être longue ...

, j'en ai bien peur, surtout que tu m'accompagnes depuis un moment.

J'ai testé le code que tu as noté.
Jeu

Alors, les coeurs, scores ainsi que l'image radar sont allés se placer sous l'image de fond.
Après, quand on trouve l'image radar (en bas à droite blanc sur blanc), ca fait bien changer l'image de RVB à NB.

Doit on tout mettre dans la même div?

**NoSmoking** · 09/10/2022, 18h18

Alors, les coeurs, scores ainsi que l'image radar sont allés se placer sous l'image de fond.

Supprime le style-inline de ton image radar à savoir style="position:absolute;right: 0" qu'il faut mettre sur le conteneur de ton image, voir plus loin

Supprime le CSS suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div {
  width: 100%;
  height: 100%;
}

Ajoute simplement :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#img-radar {
  position: absolute;
  top: 0;
  right: 0;
}
#play-state {
  position: absolute;
  top: 0;
  left: 0;
}

cela devrait rentrer dans l'ordre !

**bahh66** · 09/10/2022, 22h21

Bon ben c'est résolu.

Merci encore NoSmoking.

Faire apparaitre disparaitre une image en cliquant sur une autre

JavaScript

Discussions similaires

Partager

Partager