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 :

[DOM] DOM - modifier attributs balise IMG


Sujet :

JavaScript

  1. #1
    on
    on est déconnecté
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2002
    Messages : 12
    Points : 7
    Points
    7
    Par défaut [DOM] DOM - modifier attributs balise IMG
    Bonjour,

    Je bloque sur l'ajout d'attribut d'un objet img créé dynamiquement. En clair, j'ai un fichier HTML avec 1 table, quelques lignes contenant chacune une cellule et du texte.

    Je crée une fonction (appelée par un bouton ou via onload) laquelle crée une ligne supplémentaire contenant une image.

    Jusque là OK. Mais en créant l'objet img, je lui assigne des événements onclick & onmouseover => l'image est bien créée mais les événements ne sont pas pris en compte.

    Voici un bout de mon code (2 fonctions différentes avec un résultat similaire):

    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
    function creerImg() {
        var tbl = document.getElementsByTagName("table")[0];
        var nouvTr = document.createElement("tr");
        var nouvTd = document.createElement("td");
        var nouvImg = new Image();
     
        nouvImg.src = "image/drop.png";
        nouvImg.onmouseover="this.style.cursor='pointer'";
        nouvTd.appendChild(nouvImg);
        nouvTr.appendChild(nouvTd);
        tbl.appendChild(nouvTr);
    }
     
    function creerImg2() {
        var tbl = document.getElementsByTagName("table")[0];
        tbl.insertRow(0);
        var nouvTd = tbl.getElementsByTagName("tr")[0].insertCell(0);
     
        var nouvImg = new Image();
        nouvImg.src = "image/drop.png";
        nouvImg.onmouseover="this.style.cursor='pointer'";
     
        nouvTd.appendChild(nouvImg);
    }
    Aussi, j'ai remarqué qu'un insertRow chnage l'affichage correctement mais pas le code source de la page. Par contre, un deleteRow affecte l'affichage et le code source de la page.

    Merci d'avance pour tout aide .

  2. #2
    Membre expérimenté
    Avatar de Gruik
    Profil pro
    Développeur Web
    Inscrit en
    Juillet 2003
    Messages
    1 566
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2003
    Messages : 1 566
    Points : 1 729
    Points
    1 729
    Par défaut
    Salut,

    les gestionaires d'evenements des éléments sont des fonctions et non du code textuel, comme dans les attributs html.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    nouvImg.onmouseover = function(e) {
      this.style.cursor='pointer';
    }
    Pour ton 2eme probleme, tout code html généré via DOM n'est pas visible quand tu fais "afficher la source".
    Par contre, sous Firefox, il ya une fonctionnalité qui permet de voir le code html correspondant à l'arbre d'éléments internes au navigateur : "code source de la selection". Mieux encore l'extension FireBug est tres puissante et permet de voir l'arborescence dynamique de la page en plaçant son curseur sur les elements.

  3. #3
    on
    on est déconnecté
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2002
    Messages : 12
    Points : 7
    Points
    7
    Par défaut DOM -affecter événement
    Bien vu Gruik. Merci pour ton aide.

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10
    Points : 10
    Points
    10
    Par défaut
    Bonjour à tous,
    Je me permets de revenir sur ce topic car j'ai un probleme dans la continuité du premier...
    Je crée dynamiquement en javascript un tableau en fonction des ajouts / suppressions de l'utilisateur.
    Le tableau comporte les informations suivantes :
    marque | commentaire sur marque , ce dernier sous forme d'une image a laquelle est associée une div d'information qui apparait quand la souris passe dessus.

    A chaque ajout d'une marque j'applique le code js suivant :
    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
    26
    27
    28
    29
    30
    31
     
    ...
    //Contenu du tableau
    var items = nomSelectTargetNode[i].getElementsByTagName("item");
    for (var j=0; j<items.length; j++) 
    {
    	var marque = items[j].getElementsByTagName("marque")[0].firstChild.nodeValue;		
    	var comment = items[j].getElementsByTagName("comment")[0].firstChild.nodeValue;	   
     
    // ici si je fais : alert(marque + "-" + comment), j'ai bien "marque1 - commentaire1", "marque2 - commentaire2", etc.
     
    	var row = document.createElement("TR");
    	var td1 = document.createElement("TD");
    	var td2 = document.createElement("TD");		
     
    	td1.className="infoBorderLeft";
    	td1.appendChild(document.createTextNode(marque));
    	var imgQMark = document.createElement("img");
    	imgQMark.src = "../include/image/icones/IconeAide.gif";
    	imgQMark.border = "0";
    	imgQMark.onmouseover  = function() { afficherDiv('divInfo', comment);};
    	imgQMark.onmouseout = function() { masquerDiv("infoMarque"); };
    	td2.className = "infoBorderRight";
    	td2.width = "2%";
    	td2.appendChild(imgQMark);					
     
    	row.appendChild(td1A);
    	row.appendChild(td1B);				
    	selectFrom.appendChild(row);		
    }
    ...
    Le resultat s'affiche bien _ sauf que l'information 'comment' passée à la fonction afficherDiv est toujours la même (correspondant au commentaire de la dernière marque ajoutée)
    Vous auriez des idées pour m'aider ?

    Merci par avance !

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10
    Points : 10
    Points
    10
    Par défaut
    Bon, en fouillant mieux le forum, j'ai enfin ma réponse

    http://www.developpez.net/forums/sho...unction+boucle

    Si ca peut servir a d'autres :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    ...
    imgQMark.setAttribute("a1", comment);
    imgQMark.onmouseover  = function() { afficherDiv('divInfo', this.a1);};
    ...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] Comment modifier via le DOM les attributs d’un champ INPUT ?
    Par tavarlindar dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 16/04/2008, 13h47
  2. [DOM] récupération d'une balise par la valeur de son attribut
    Par slyfer dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 10/11/2007, 13h50
  3. [DOM]modifier une balise xsl via le DOM
    Par boule_t dans le forum APIs
    Réponses: 1
    Dernier message: 19/10/2007, 14h54
  4. [DOM] DOM et plusieurs attributs
    Par Tyler Durden dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/08/2007, 22h03
  5. [DOM] DOM : createElement d'une balise script dans le HEAD
    Par Mike_69 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 05/04/2007, 14h31

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