Texte lié à des images aléatoires.

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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

Pièce jointe 629306

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

Code:

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:

shuffledImages[i]

pour l'url ...
utilise

Code:

shuffledImages[i].url

et pour récupoérer le texte associé

Code:

shuffledImages[i].txt

21/11/2022, 10h15
NoSmoking
Bonjour,

Citation:

Envoyé par Jeremy_prt

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:

1 2 3 4 <figure> <img src="nom-image" alt=""> <figcaption>Description image</figcaption> </figure>
Il peux être judicieux de les construire dynamiquement.