Discussion :

[Jeremy_prt]

Bonsoir, j'ai des images qui se place aléatoirement au moment ou je refresh mon site, quand je passe mon curseur sur l'une des photo, un texte apparait. J'aimerais faire en sorte que le texte soit lié à la photo au lieur d'avoir marqué "description photo 1,2,3..." Comment puis-je faire ? Merci

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
 <div class="groupe_image reveal3">
          <div class="photo">
            <div class="bordur"></div>
            <p>Description photo 1</p>
          </div>
          <div class="photo">
            <div class="bordur"></div>
            <p>Description photo 2</p>
          </div>
          <div class="photo">
            <div class="bordur"></div>
            <p>Description photo 3</p>
          </div>
        </div>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
#exposition .center .groupe_image2 .photo p {
  margin-top: 30px;
  opacity: 0;
  transition: all 0.7s;
  transform: translateY(150%);
}
 
#exposition .center .groupe_image2 .photo:hover p {
  opacity: 1;
  transform: translateY(0%);
}

Code JavaScript :

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
//Image Aléatoire
const images = [
  "url(./images/1.jpg)",
  "url(./images/2.jpg)",
  "url(./images/3.jpg)",
  "url(./images/4.jpg)",
  "url(./images/5.jpg)",
  "url(./images/6.jpg)",
  "url(./images/7.jpg)",
  "url(./images/8.jpg)",
  "url(./images/9.jpg)",
  "url(./images/10.jpg)",
  "url(./images/11.jpg)",
  "url(./images/12.jpg)",
  "url(./images/13.jpg)",
  "url(./images/14.jpg)",
  "url(./images/15.jpg)",
  "url(./images/16.jpg)",
  "url(./images/17.jpg)",
  "url(./images/18.jpg)",
];
const shuffledImages = images.sort((a, b) => 0.5 - Math.random());
 
document.querySelectorAll(".photo").forEach((photo, i) => {
  if (shuffledImages[i]) {
    photo.style.backgroundImage = shuffledImages[i];
  } else {
    console.log("plus d'image à définir");
  }
});