Discussion :

[_Nrpyc_]

Bonjour à tous.
J'ai utilisé cette source : [SRC] Image aléatoire au chargement de la page.

Je suis novice en ce qui concerne la programmation HTML et j'apprécierais d'avoir un peu d'aide (mes connaissances se limitent aux bases du html et du javascript).
J'ai utilisé la première méthode citée qui fonctionne d'ailleurs très bien.
Cependant je n'arrive pas à afficher un texte du style "Cette image représente ceci". Ainsi je voudrais par exemple que lorsque l'image aléatoire sortie est celle avec un arbre, il y ai écrit à la suite "Cette image représente un arbre".

Pourriez-vous m'aider ?

Cordialement.

[mathieu]

pour faire cela, vous devrez partir d'un tableau comme le suivant par exemple avec la 2e méthode de sélection

Code :

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

1
2
3
4
5
6
7
8
9
10
11
let elements = [
	{
		"nom_image" : "arbre.png",
		"libelle" : "ceci n'est pas un arbre",
	},
	{
		"nom_image" : "brocoli.png",
		"libelle" : "Le prochaine repas ?",
	},
 
];

[jreaux62]

bonjour,

Code html :

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

1
2
3
4
<figure id="randomImg">
  <img src="" alt="" style="max-width:200px;" />
  <figcaption></figcaption>
<figure>

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
21
22
"use strict";
function randomImg( figure_id )
{
  let random_images = [
    {
      "url" : "https://www.museumtv.art/wp-content/uploads/2017/08/ceci-nest-pas-une-pipe1-e1502441198132.jpg",
      "txt" : "Ceci n'est pas une pipe",
    },
    {
      "url" : "https://www.museumtv.art/wp-content/uploads/2017/08/ceci-nest-pas-une-pipe-parodie-magritte-02.jpg",
      "txt" : "Sel ou poivre ?",
    },
  // ....
  ];
  let random_index = Math.floor(Math.random() * random_images.length);
  document.querySelector( figure_id + ' img' ).src = random_images[random_index].url;
  document.querySelector( figure_id + ' img' ).alt = random_images[random_index].txt;
  document.querySelector( figure_id + ' figcaption' ).textContent = random_images[random_index].txt;
}
window.addEventListener("DOMContentLoaded", (event) => {
  randomImg('#randomImg');
});