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