Gestion dynamique d'images

[cyscek]

Bonsoir à tous !

Je réalise un petit projet pour mon plaisir personnel. Plutôt que de prolonger l'introduction, je vais entrer directement dans le vif du sujet.

J'ai commencé une page html avec une textarea, un bouton et une image. Mon but est que la personne censée utiliser cette page rentre une liste d'image dans la textarea:

Code :

1
2
3
4
5
6
 
image1
image2
image3
...
imagen

Quand j'appuie sur le bouton, j'appelle du code javascript. Je parse les données recueillies dans la textarea, pour forger chaque url et obtenir un tableau de ce style :

Code :

1
2
3
4
5
6
 
http://monsite.com/image1.jpg
http://monsite.com/image2.jpg
http://monsite.com/image3.jpg
...
http://monsite.com/imagen.jpg

Bon déjà, je ne sais pas exactement comment je vais parser mes infos de ma textarea, mais je devrais m'en sortir, ça doit pas être plus compliqué qu'en java.

Non, mon problème vient après. Je veux donc afficher toutes les images listées à la place de l'image de base (ou à la suite, je ne suis pas sectaire).
J'ai farfouillé, je débute en javascript/html, et j'ai vu un peu l'utilisation des tableaux et des list html. Problème, malgré les exemples que j'ai vu, je ne trouve pas comment faire une liste d'image par exemple, et les ajouter dynamiquement en javascript.

Je ne peux pas mettre un nombre prédéfini d'image dans mon code html et les remplir une par une, car je ne sais pas le nombre d'image que va vouloir mon utilisateur.

J'imagine que le plus "simple" pour moi serait d'utiliser une liste, pour ajouter ou enlever des éléments, seulement je ne comprend pas comment je peux rentrer dans ma liste un élément du style :

Code :

'<img name="example" src="http://monsite.com/image.jpg">'

Est-ce que quelqu'un pourrait m'indiquer comment manipuler une liste html en javascript, et comment rentrer correctement dedans ma ligne html visant l'image correcte ?

Merci d'avance,

David

[emmanuel.remy]

Salut,

Une fois que tu as parsé ton texte et récupéré ta liste d'images, alors tu peux créer chaque objet HTML img ainsi:

Code :

1
2
3
    var img= document.createElement('img');
    img.src= src;  //src est l'url de l'image parsée

Ensuite tu peux "accrocher" cette image dans le DOM de la page. Par exemple en fin de document:

Code :

1
2
 
    document.body.appendChild(img);

De là à en faire une fonction, cela ne pose pas de souci.

ERE

[cyscek]

Merci beaucoup, je pense que c'est le appendChild qui me manquait

Je testerai ça ce soir, en espérant que je parvienne à le mettre en place, mais normalement y devrait pas y avoir d'accroc, c'est bien expliqué.

[cyscek]

Donc après test, ça marche impec, merci beaucoup. Maintenant, j'ai une autre question, alors je la pose ici en espérant que ça ne gêne pas, c'est plus trop le même thème mais bon...

Lors de mon traitement de mes noms d'images, tout se passe correctement, elles sont bien affichées et tout. Seul "problème", si quelqu'un met un nom d'image non présent dans le site.

Code :

1
2
3
4
5
 
image1
image2
fausseimage
image3

Comme je parse tout, et n'ait pas de moyen de prédire si la ligne contient bien un nom d'image, je forge chaque url, et donc forcément celle là aussi:

http://monsite.com/fausseimage.jpg

Et bien sûr, je n'ai pas cette image. Existe-t-il en javascript une méthode pour tester une url, et voir si elle pointe bien sur quelque chose ? Attention, je ne cherche pas à vérifier si la syntaxe est correcte, puisque c'est moi qui forge l'url. Je sais le faire en java, mais je n'ai pas trouvé d'équivalent en javascript =/