IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Gestion dynamique d'images


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    78
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 78
    Par défaut Gestion dynamique d'images
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    '<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

  2. #2
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
        document.body.appendChild(img);
    De là à en faire une fonction, cela ne pose pas de souci.

    ERE

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    78
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 78
    Par défaut
    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é.

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    78
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 78
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 =/

Discussions similaires

  1. [HTML 5] Outil de gestion dynamique d'image sous HTML5
    Par ba.alioune dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 09/07/2013, 16h12
  2. [DHTML / Javascript] Raffraichissement dynamique d'images
    Par CUCARACHA dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 13/02/2006, 15h51
  3. Réponses: 9
    Dernier message: 16/11/2005, 11h32
  4. Réponses: 24
    Dernier message: 30/10/2005, 09h27
  5. [FLASH MX] Gestion dynamique de liens
    Par guy2004 dans le forum Flash
    Réponses: 18
    Dernier message: 20/01/2005, 08h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo