Bonjour à tous,

Je souhaiterais faire en sorte que lorsque la souris passe sur une image, un texte s'affiche sur mon site.

Voilà mon code html :
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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Dogs</title>
   <div id="entête">
        <h1>
     Only for dog lovers !
   </h1>       
     <h2>
       Check out here all dogs breeds : one cookie if you catch animals who aren't.
     </h2>
   </div>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="http://radservebeer.free.fr" /> <meta name="generator" content="PSPad editor, www.pspad.com" /> <style type="text/css"> .texte { display:none; } a:hover span { display: block; }</style> 
  </head>
 
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
 
    <div id="main">
      <div id="menu">
       Menu
       </div>
        </div>
 
    <div id="contenu">
     Contenu
      <div class="img-container">
      </div>
      </div>
 
    <div id="footer">
     Pied de Page
      </div>
 
    <div align="center"> <p><a href="url">Chien <span class="texte"> Ceci est un chien</span></a></p> </div> 
  </body>
</html>

Et js :
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
23
24
25
 
$(document).ready(function(){
 
	var dogs,body=$( "body" )
	,dog,imgContainer,img
	,dogsdata=$( "<p class='dogs-data'></p>" );
 
	$.getJSON( "https://api.thedogapi.com/v1/images/search?limit=100&page=1000&order=Desc", function( json ) {
	    console.log( json ); // print data in the console
	    dogs = json; //the variable dogs uses the document json 
 
	    for( var i = 0; i< json.length; i = i + 1 ) {   // loop through each dogs in our "breeds" array
 
		dog = dogs[ i ];     // store the current dog in a variable
		imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data
		img = $( "<img>" );     // we create a jQuery object with an "img" element
		img.attr( "src", dog.url);   // set its "src" attribute with a jquery method
		imgContainer.append( img );     // and append this element to our container
		dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );     // set its inner HTML with jQuery
		imgContainer.append( dogsdata );     // and append this to our container
		body.append( imgContainer );     // finally we append the container to the "body" of our document
	    }
      });
 
});
Or j'aimerais savoir comment faire pour que chaque image lorsque l'on passe la souris dessus affiche les paramètres json associés = par exemple ici ce serait afficher le .breeds.name et d'autres informations contenues dans le json associées à cet image en particulier.

Moi ce que j'aurais fait ça aurait été utiliser l'algorithme js avec le for pour implémenter cette procédure. Seulement je suis incapable de le formuler avec du code..

Pourriez-vous m'aider ??

Merci d'avance