Lire XML pour afficher et clique

Bonjour,
Je voudrais lire un fichier XML qui contient les mots canard, chat et chien.
Ensuite, je voudrais les afficher. Et quand je chique sur l'image, ça affiche chat par exemple

Je ne sais pas comment faire pour lire un fichier xml et le cliquer sur l’image.
Je voudrais afficher beaucoup plus image, c’est certainement pas la bonne méthode

voici mon programme
http://xenom.flash.free.fr/Img/Images.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

var Img0 = new Image(); Img0.src = "Img/chat.jpg";   var Img1 = new Image(); Img1.src = "Img/canard.jpg";   var Img2 = new Image(); Img2.src = "Img/chien.jpg";   window.onload = function() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');   canvas.tabIndex = 0; canvas.focus();   canvas.width = 800; canvas.height = 600;   ctx.drawImage(Img0, 0, 10, 100, 100); ctx.drawImage(Img1, 100, 10, 100, 100); ctx.drawImage(Img2, 200, 10, 100, 100); }

---

Merci Beaucoup

Bonjour,

Citation:

---

voici mon programme
http://xenom.flash.free.fr/Img/Images.html

---

ce n'est pas un programme mais juste une image du rendu que tu souhaites.

Citation:

---

Je ne sais pas comment faire pour lire un fichier xml et le cliquer sur l’image.

---

as tu fais une recherche sur ce site pour commencer ?

Citation:

---

Je voudrais afficher beaucoup plus image, c’est certainement pas la bonne méthode

---

Tu peux créer les éléments <img> et les insérer dans ta page plutôt que de les mettre dans un <canvas>, tu as un impératif ?

Bonjour,
"ce n'est pas un programme mais juste une image du rendu que tu souhaites."
Je souhaite réaliser un programme IA avec des Images seulement.
Par exemple une image : "palette couleur" + "Soleil" + "?" qui donnait une image "Jaune" (un langage universelle)
Par la suite, tout le monde pourra ajouter ses images
J'ai déjà réalisé un chatboot en php5 :http://ia.jenny.free.fr/ et voudrais le faire une IA avec seulement des Images.

"as tu fais une recherche sur ce site pour commencer ?"
oui, rien qui me convient
En php5 j'ai trouvé et qui fonctionne. Je ne pense pas que ça fonctionne en JavaScript

Code:

---

1 2 3 4

$dom0=new DOMDocument();$dom0->load("Img/text.xml"); $node=$dom0->getElementsByTagName('contacts')->item(0); foreach($node->childNodes as $n) if($n->nodeType==XML_ELEMENT_NODE) ....

---

"Tu peux créer les éléments <img> et les insérer dans ta page plutôt que de les mettre dans un <canvas>, tu as un impératif ? "
oui je sais pour <img>. mais j'ai un problème pour faire une boucle For
<canvas>, je croyais que c'était obligatoire.

Donc voilà...
Je cherche de l'aide pour lire un fichier XML pour afficher 50 images(voir plus) avec clique.
Après les afficher dans d’orle du clique.

les images seront classer par catégorie
je pense que ça serait intéressent de faire une IA avec des Images.
Bref, je voudrais essayer
Merci

Citation:

---

oui, rien qui me convient (...)
Je cherche de l'aide pour lire un fichier XML pour afficher 50 images(voir plus) avec clique.

---

Pour la lecture d'un fichier XML en JavaScript on peut faire (d'autres méthodes sont disponibles) :

Code:

---

1 2 3 4 5 6 7 8 9

var oXhr = new XMLHttpRequest(); oXhr.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log( this.responseText); console.log( this.responseXML); // là seront tes données } }; oXhr.open('GET', 'nom_fichier.xml', true); oXhr.send()

---

il te suffit de récupérer les données d’intérêt et de les manipuler.

Citation:

---

oui je sais pour <img>. mais j'ai un problème pour faire une boucle For

---

qu'est ce que tu n'arrives pas à faire ?

Citation:

---

<canvas>, je croyais que c'était obligatoire.

---

aucunement même si dans certains cas cela peut s'avérer utile.


Nota :
La version côté serveur me semble quand même plus judicieuse.

• :faq: https://php.developpez.com/faq/?page=dom
• Récupérer valeur d'un noeud xml vers du php

La gestion des événements pouvant effectivement se faire côté client.

Merci pour le Xml, Je regarderais ça tranquillement :D

"qu'est ce que tu n'arrives pas à faire ?"

ce genre de chose :

Code:

---

for (var i = 0; i < 9; i++) ctx.drawImage(Img[i], i*100, 10, 100, 100);

---

avec la sélection de l'image que je n'ai pas trouvé

pour remplacer :

Code:

---

1 2 3 4 5

ctx.drawImage(Img0, 0, 10, 100, 100); ctx.drawImage(Img1, 100, 10, 100, 100); ctx.drawImage(Img2, 200, 10, 100, 100); ....

---

j'aurais beaucoup plus de temps pour cherche ce weekend une solution
merci Encore.

j'ai tous les éléments pour afficher une image, mais ça ne fonctionne pas.

Code:

---

1 2 3 4

<reminder> <Img>Img/chat.jpg</Img> <Img>Img/chien.jpg</Img> </reminder>

---

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

window.onload = function() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.tabIndex = 0; canvas.focus(); canvas.width = 800; canvas.height = 600;   var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var arr = []; var x, i, xmlDoc; xmlDoc = this.responseXML; x = xmlDoc.getElementsByTagName("Img"); for (i = 0; i< x.length; i++) { arr[i] = x[i].childNodes[0].nodeValue; }   var images = []; var image = new Image(); image.src = arr[0]; images.push(image);   //for (var i = 0; i < 1; i++) ctx.drawImage(images[0], 0, 10, 100, 100); }   }; request.open('GET', 'text3.xml', true); request.send(); }

---

Reprenons depuis le début et essayons de structurer tout cela.

Point #1
Fonction de lecture du fichier XML

Nous allons créer une fonction de lecture du fichier XML sur base de ce qui a déjà été dit.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function getXML(url, callback) { const oXhr = new XMLHttpRequest(); oXhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // appel fonction d'affichage en passant en paramètre le contenu XML callback(this.responseXML); } }; oXhr.open("GET", url, true); oXhr.send() }

---

Tu noteras que l'on passe en paramètre à cette fonction l'url du fichier à lire et la référence à la fonction qui va réaliser l'affichage ou bien d'autres choses.
Elle est un peu succincte mais correcte et réutilisable.

Point #2
Maintenant regardons les possibilités d'affichages
Tu peux soit afficher/ajouter tes images directement dans le DOM, soit les afficher dans un élément <canvas>, pourquoi pas !.

On va partir du principe que dans ton code HTML on trouve les éléments suivants :

Code:

---

1 2	<div id="div-images"></div> <canvas id="canvas"></canvas>

---

Point #2.1
Affichage dans le DOM.

On va créer une fonction d'affichage comme suit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function addImages(docXML) { // récup. élément de destination de l'ajout const oDest = document.getElementById("div-images") // récup. des différents élements devant être traités const images = docXML.querySelectorAll("Img"); // on boucle sur chacun d'eux images.forEach((img) => { // création d'un élément <img> const oImage = document.createElement("IMG"); // ajout événement sur le load oImage.onload = () => { // ajout à l'élément destination oDest.appendChild(oImage); }; // affectaion de l'url à l'image oImage.src = img.textContent; }); }

---

Je ne pense pas que tu ais de soucis à tout comprendre à ce stade.

Pour afficher les images on fera un simple appel à la fonction getXML et celle-ci appellera la fonction addImages, la fonction callback donc, lorsque le fichier aura été lu.
Dans ton code on va donc retrouver cet appel sous cette forme

Code:

---

getXML( "nom_fichier.xml", addmages);

---

Point #2.2
Affichage dans un <canvas>.

La démarche va être la même avec juste les spécificités liés aux <canvas>.

On va créer une fonction d'affichage comme suit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function drawImages(docXML) { // récup. et init de lélément de destination de l'affichage const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 600; // récup. des différents élements devant être traités const images = docXML.querySelectorAll("Img"); // on boucle sur chacun d'eux images.forEach((img, ind) => { // création d'un Object Image const oImage = new Image(); // ajout événement sur le load oImage.onload = () => { // dessin au bon endroit ctx.drawImage(oImage, ind * 200, 0, 200, 200); }; // affectaion de l'url à l'image oImage.src = img.textContent; }); }

---

Pour afficher les images on fera un simple appel à la fonction getXML et celle-ci appellera la fonction drawImages, la fonction callback donc, lorsque le fichier aura été lu.
Dans ton code on va donc retrouver cet appel sous cette forme

Code:

---

getXML( "nom_fichier.xml", drawImages);

---

Concernant cette fonction il est noter qu'il faut décaler les images pour qu'elles ne se superposent pas, en réalité elles effacent l'emplacement déjà occupé, et pour ce faire on a utilisé ind * 200, dans ctx.drawImage(...), pour décaler les images de 200px à chaque fois.

Point #3
Perso je partirais sur la solution insertion dans le DOM, plus propre et facilement gérable avec du CSS.

Voilà à toi de jouer, et si tu as des questions n'hésites pas !

Merci ça fonctionne très bien. :D
Je vais regarder tout ça en détail, et voir pour le faire à ma façon.

:D