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");
  }
});

[SpaceFrog]

Modifie ta constante images poru en faire un array de JSONs ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const images = [ { url : "url(./images/1.jpg)",
                            txt: "text image 1"},
                          { url: "url(./images/2.jpg)",
                             txt:"texte image 2"},
                          { url:  "url(./images/3.jpg)",
                             txt: "texte image 3"},
                            .../...
                          { url:  "url(./images/18.jpg)",
 
                             txt: " Texte image 18"}
];

là ou tu utilisais

Code :

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

shuffledImages[i]

pour l'url ...
utilise

Code :

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

shuffledImages[i].url

et pour récupoérer le texte associé

Code :

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

shuffledImages[i].txt

[NoSmoking]

Bonjour,

J'aimerais faire en sorte que le texte soit lié à la photo au lieur d'avoir marqué "description photo 1,2,3..."

tes images sont donc importantes et de ce fait n'ont rien à faire en background, elles devraient faire partie intégrante de ta page via une structure du type

Code html :

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

1
2
3
4
<figure>
  <img src="nom-image" alt="">
  <figcaption>Description image</figcaption>
</figure>

Il peux être judicieux de les construire dynamiquement.