Afficher un texte sur une image json

Version imprimable

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:

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:

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

24/01/2019, 15h14
CosmoKnacki

La première chose que tu dois faire c'est de corriger ton code html, parce que là c'est la cata.

Pour ce qui est de l'affichage au survol de l'image, tu peux le faire en utilisant uniquement les css avec la pseudo classe :hover, le sélecteur d'adjacence ~ et la propriété visibility, exemple:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Dogs</title>
    <link rel="stylesheet" href="style.css"/>
 
    <style type="text/css">
.img-container img {
    height: 20vh;
}
 
.img-container img:hover ~ .dog-data {
    visibility: visible;
}
 
.dog-data {
    visibility: hidden;
}
    </style> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="header">
        <h1>Only for dog lovers !</h1>       
        <h2>Check out here all dogs breeds : one cookie if you catch animals who aren't.</h2>
    </div>
 
    <div id="main">
        <div id="menu">Menu</div>
    </div>
 
    <div id="contenu">
        Contenu
        <div id="doglist"></div>
    </div>
 
    <div id="footer">
        Pied de Page
    </div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    $.getJSON( "https://api.thedogapi.com/v1/images/search?limit=100&page=1000&order=Desc", function( json ) {
        var doglist = $('#doglist');
        // for (var i = 0, imax = json.length; i < imax; i++) {
        for (var i = 0, imax = 4; i < imax; i++) {
            var item = $('<div class="img-container"><img src="' + 
                         json[i].url + 
                         '"><p class="dog-data">' +
                         ( json[i].breeds[0] ? json[i].breeds[0].name : "" ) +
                         '</p>');
            doglist.append(item);
        }
    });
});

Bonjour, merci beaucoup, cela fonctionne en effet !

J'aurais juste quelques questions :

Code:

1
2
.img-container img:hover ~ .dog-data {
    visibility: visible;

--> à quoi sert la petite vague ?

Code:

1
2
3
4
5
6
7
8
9
10
11
var doglist = $('#doglist');
         for (var i = 0, imax = 4; i < imax; i++) {
            var item = $('<div class="img-container"><img src="' + 
                         json[i].url + 
                         '"><p class="dog-data">' +
                         ( json[i].breeds[0] ? json[i].breeds[0].name : "" ) +
                         '</p>');
            doglist.append(item);
        }
    });
});

--> imax c'est bien le nombre d'images max ?
--> i représente le numéro de tableau js si je ne me trompe pas ?
--> que signifie i++ = incrémentation ?
--> je ne comprend pas bien ce code là sur son écriture :

Code:

1
2
3
4
5
 var item = $('<div class="img-container"><img src="' + 
                         json[i].url + 
                         '"><p class="dog-data">' +
                         ( json[i].breeds[0] ? json[i].breeds[0].name : "" ) +
                         '</p>');

Merci d'avance !

26/01/2019, 19h21
NoSmoking

Bonjour,
il faut faire de temps en temps un effort de lecture/recherche, on ne peut pas toujours tout faire pour vous :aie:

Citation:

--> à quoi sert la petite vague ?

Explication fournie par CosmoKnacki dans sa réponse.

Citation:

--> imax c'est bien le nombre d'images max ?
--> i représente le numéro de tableau js si je ne me trompe pas ?
--> que signifie i++ = incrémentation ?

Les meilleurs cours et tutoriels pour apprendre le JavaScript

Citation:

--> je ne comprend pas bien ce code là sur son écriture :

:faq: Comment puis-je créer un nouvel élément du DOM ?

De plus si tu utilises jQuery alors il y a la documentation officielle, très bien faite et pleine d'exemples.

La petite vague ~ s'appelle un tilde (de même ^ n'est pas un petit chapeau chinois, mais un accent circonflexe). Quant à son utilité, je l'ai dit dans mon précédent post: c'est un sélecteur css d'adjacence (un sélecteur d'adjacence indirecte pour être précis) et une recherche te donnera tous les renseignements à ce sujet.

Citation:

imax c'est bien le nombre d'images max ?

Oui c'est bien ça, dans mon exemple je l'ai fixé à 4 en dur pour limiter le temps de chargement, mais pour avoir toutes les images, il faut commenter (ou effacer) cette ligne et dé-commenter la précédente:for (var i = 0, imax = json.length; i < imax; i++) {.

L'intérêt de cette variable imax et de cette écriture particulière de la boucle for est de simplifier l'évaluation de la condition d'arrêt de la boucle qui, sans elle, s'écrirait i < json.length. Mais tu peux très bien l'écrire for (var i = 0; i < json.length; i++) { (après tout l'accès à la propriété length du tableau json ne doit pas être si coûteuse que ça, mais cette manière de faire est bonne à connaître).

Citation:

--> i représente le numéro de tableau js si je ne me trompe pas ?

Oui, si tu veux, sauf que le terme précis est l'index du tableau.

Citation:

--> que signifie i++ = incrémentation ?

C'est ça. Ça vient directement du langage C dont javascript s'est très largement inspiré, comme beaucoup d'autres langages, pour sa syntaxe.
Citation:
--> je ne comprend pas bien ce code là sur son écriture :
Code:

1 2 3 4 5 var item = $('<div class="img-container"><img src="' + json[i].url + '"><p class="dog-data">' + ( json[i].breeds[0] ? json[i].breeds[0].name : "" ) + '</p>');
Il n'y a rien de bien mystérieux: lorsque tu passes en argument du constructeur jQuery() (ou de l'alias $()) une chaîne de caractère html, celui-ci parse la chaîne et renvoie un objet jQuery contenant le ou les nœuds DOM correspondants. La condition pour que le constructeur remarque qu'il s'agisse bien de html et pas d'un sélecteur, est que la chaîne commence par <nomdetag ...>.
Néanmoins tu peux aussi préciser de manière explicite qu'il s'agit bien de html en écrivant: $.parseHTML(chainehtml) à la place de $(chainehtml), mais c'est moins concis.