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 :

Gérer un même évenement sur des div imbriqués.


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 14
    Par défaut Gérer un même évenement sur des div imbriqués.
    Bonjour tout le monde.

    J'aurai besoin d'une indication sur la manière de gérer un événement identique sur des div imbriquer.

    explication:
    j'ai une div principale id = P

    et dans cette div P :
    -1 image id = i
    -4 div id = s1, s2, s3, s4.


    sur la div P, un mouseOver rend s1, s2, s3 et s4 visible car par défautl ils sont en hidden.

    et je voudrais associer sur chacune des div s1, s2, s3 et s4 le même evenement onMouseOver pour pouvoir par exemple changer la couleur de fond de l'image ou ajouter un signe distinctif pour que l'on sache que l'on est bien sur cette div et ensuite lui associer un OnMouseUp pour inscrire son id dans un Input Text.

    Mon problème est que seul le OnMouveOver de P est pris en compte...et ceux de s1, s2, s3 et s4 sont totalement ignoré...

    Y a t'il quelque chose A faire pour arrangé celà ou est-ce impossible tout simplement ?

    Merci pour votre aide, bonne journée.

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    Citation Envoyé par snake-09 Voir le message
    sur la div P, un mouseOver rend s1, s2, s3 et s4 visible car par défautl ils sont en hidden.
    ok....

    Citation Envoyé par snake-09 Voir le message
    et je voudrais associer sur chacune des div s1, s2, s3 et s4 le même evenement onMouseOver pour pouvoir par exemple changer la couleur de fond de l'image ou ajouter un signe distinctif pour que l'on sache que l'on est bien sur cette div et ensuite lui associer un OnMouseUp pour inscrire son id dans un Input Text.

    Mon problème est que seul le OnMouveOver de P est pris en compte...et ceux de s1, s2, s3 et s4 sont totalement ignoré...
    euh là je n'ai rien compris
    En plus l'événement OnMouseUp n'existe pas As-tu un bout de code ?

  3. #3
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 14
    Par défaut
    oui j'ai un bout de code :
    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
     
    function new_comp(type,num){
     
    nbs++;
     
    	div = document.createElement("div");
    	div.ondblclick=function(){this.parentNode.removeChild(this); contenu.splice('nbs',1);idContenu.splice('nbs',1);};
     
    	div.class=type;
    	div.id = (type+num);
    	var divID= div.id;
    	div.style.position= "absolute";
    	div.style.top="0px";
    	div.style.left="opx";
    	div.style.width="185px";
    	div.style.hight="150px";
    	new Draggable(div);
     
    	switch (type){
     
    					case "pc":
    						var ip1 = div.id +"ip1";
    						var ip2 = div.id +"ip2";
    						var ip3 = div.id +"ip3";
    						var ip4 = div.id +"ip4";
     
    						var nm1 = div.id +"nm1";
    						var nm2 = div.id +"nm2";
    						var nm3 = div.id +"nm3";
    						var nm4 = div.id +"nm4";
     
    						var gw1 = div.id +"gw1";
    						var gw2 = div.id +"gw2";
    						var gw3 = div.id +"gw3";
    						var gw4 = div.id +"gw4";
     
    						div.innerHTML = '<p>'+div.id+'<br><img src="./images/pc.png" style="cursor:hand;"><div id="info'+div.id+'" style="visibility:hidden" ><br>@ip-s1: <input id="'+ip1+'" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'" maxlength="3" value="255"><br>masque: <input id="'+nm1+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
    						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
    						document.getElementById("monReseau").appendChild(div);
     
    					break;
     
    					case "routeur":
    						var ip1 = div.id +"ip1";
    						var ip2 = div.id +"ip2";
    						var ip3 = div.id +"ip3";
    						var ip4 = div.id +"ip4";
     
    						var nm1 = div.id +"nm1";
    						var nm2 = div.id +"nm2";
    						var nm3 = div.id +"nm3";
    						var nm4 = div.id +"nm4";
     
    						var gw1 = div.id +"gw1";
    						var gw2 = div.id +"gw2";
    						var gw3 = div.id +"gw3";
    						var gw4 = div.id +"gw4";
     
    						div.innerHTML = '<p>'+div.id+'<br><img src="./images/routeur.png"><div id="info'+div.id+'" style="visibility:hidden"><div id="'+div.id+'slot1" style="visibility:hidden" ><br>@ip-s1: <input id="'+ip1+'s1" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s1" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s1" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s1" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div><br>@ip-s2: <input id="'+ip1+'s2" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s2" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s2" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s2" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s2" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s3: <input id="'+ip1+'s3" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s3" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s3" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s3" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s3" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s4: <input id="'+ip1+'s4" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s4" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s4" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s4" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s4" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
    						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
    						document.getElementById("monReseau").appendChild(div);
     
    					break;
     
    					case "routeurSf":
    						var ip1 = div.id +"ip1";
    						var ip2 = div.id +"ip2";
    						var ip3 = div.id +"ip3";
    						var ip4 = div.id +"ip4";
     
    						var nm1 = div.id +"nm1";
    						var nm2 = div.id +"nm2";
    						var nm3 = div.id +"nm3";
    						var nm4 = div.id +"nm4";
     
    						var gw1 = div.id +"gw1";
    						var gw2 = div.id +"gw2";
    						var gw3 = div.id +"gw3";
    						var gw4 = div.id +"gw4";
     
    						div.innerHTML = '<p>'+div.id+'<br><img src="./images/routeurSf.png"><div id="info'+div.id+'"style="visibility:hidden"><br>@ip-s1: <input id="'+ip1+'s1" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s1" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s1" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s1" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s1" type="text"size="1" maxlength="3" value="255"><br>@ip-s2: <input id="'+ip1+'s2" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s2" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s2" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s2" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s2" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s2" type="text"size="1" maxlength="3" value="255"><br>@ip-s3: <input id="'+ip1+'s3" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s3" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s3" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s3" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s3" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s3" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"><br>@ip-s4: <input id="'+ip1+'s4" type="text"size="1"  maxlength="3" value="255"><input id="'+ip2+'s4" type="text"size="1"  maxlength="3" value="255"><input type="text"size="1" id="'+ip3+'s4" maxlength="3" value="255"><input type="text"size="1" id="'+ip4+'s4" maxlength="3" value="255"><br>masque: <input id="'+nm1+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm2+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm3+'s4" type="text"size="1" maxlength="3" value="255"><input id="'+nm4+'s4" type="text"size="1" maxlength="3" value="255"><br>gateway:<input id="'+gw1+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw2+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw3+'" type="text"size="1" maxlength="3" value="255"><input id="'+gw4+'" type="text"size="1" maxlength="3" value="255"></div></p>'
    						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
    						document.getElementById("monReseau").appendChild(div);
    					break;
     
    					case "internet":
    						div.innerHTML = '<img src="./images/internet.png">'
    						div.setAttribute('OnMouseUp','set_Comp_To_Link(this.id)');
    						document.getElementById("monReseau").appendChild(div);
    					break;
    	}
     
    						div.setAttribute('OnMouseOver', 'display("info"+this.id,"v")');
    						div.setAttribute('OnMouseOut', 'display("info"+this.id,"nv")');
     
    contenu.push(div.class);
    idContenu.push(div.id);
     
     
    }
    voilà pour le moment j'ai ça qui marche .

    maintenant je voudrai modifier ça pour ajouter un onMouseOver et un onMouseUp sur les div
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <div id="'+div.id+'slot1" style="visibility:hidden" >
    <div id="'+div.id+'slot2" style="visibility:hidden" >
    <div id="'+div.id+'slot3" style="visibility:hidden"  >
    <div id="'+div.id+'slot4" style="visibility:hidden" >
    dans la partie routeur

    afin de les rendre visible individuelement (avec le onMouseOver)et de pouvoir y cliquer individuelement pour renvoyer l'id de la div visible et pas l'id de la div générale( avec le onMouseUp).

    Je ne peut pas mettre un onMouseClick car il est déjà utiliser pour selectioner l'objet que je déplace. Le onMouseUp me permet de lancer une action lorsque je relache la souris, ce qui du point de vu d'un utilisateur revien a click sur la souris.

    merci de ton aide.

Discussions similaires

  1. Action unique d'un bouton sur des div de même class
    Par artenis dans le forum jQuery
    Réponses: 16
    Dernier message: 04/10/2013, 00h43
  2. [HTML/CSS]Aide sur des div
    Par roudoudouduo dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 09/11/2006, 08h56
  3. Réponses: 9
    Dernier message: 31/05/2006, 11h56
  4. [CSS] marge interne dans des div imbriqués
    Par Stitchover dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 26/04/2006, 15h23
  5. Centrer une page avec des DIV imbriqués
    Par emstar dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 25/04/2006, 18h42

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