Sujet Précédent Sujet Suivant

Récuperer l'id d'une image et de son parent en cliquant sur l'im

Résolu
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 10 mai 2016 à 11:39
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 11 mai 2016 à 18:04
Bonjour,
Je n'arrive pas à trouver sur le web comment récupérer l'id de l'image et l'id du parent en cliquant sur l'image ou q'elle soit
Pouvez vous m'aider?
le code ne fonctionnat pas est dans la fonction dblclik
Cordialement 

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
    <style type="text/css">
        body {
            background-color: #9CB7D4;
        }

        .div-drag {
            margin-left: 35%;
            display: inline-block;
            width: 50px;
            height: 50px;
            border: solid 1px black;
            border-radius: 25px;
            background-color: yellow;
            position:relative;
        }

        .div-drop {
            
            display: inline-block;
            width: 50px;
            height: 50px;
           /* border: solid 1px black;*/
            border-radius: 25px;
            background-color: yellow;
            position:relative;
        }

        .divabsolute {
            top: 0px;
            left: 0px;
            position:absolute;
        }

        .plateaucadre{
	margin-left:35%;
    height:544px;
	width:544px;
	background-size: 100% 100%;
	
    border:solid 2px black;
            border-radius:10px;
           background-color: deepskyblue;
}

.tbaide{

	position: relative;
	display:inline-block;
	margin-left: 2px;
	margin-top: 2px;
	float:left;
	font-size:0;
 
            border-radius:8px;
           background-color: red;;
}

.tbaide td{

	height:50px;
	width:50px;
	margin: 0px;
	padding:0px;
    
            border-radius:50px;
           background-color: yellow;
}

.plateaucadre{
	margin-left:50%;
            margin-top: 5px;
	height:525px;
	width:525px;
	background-size: 100% 100%;
	/*background-image:url("image/game.jpg");*/
    border:solid 2px black;
            border-radius:10px;
           background-color: deepskyblue;;
	
}
        .valideroperation {
            margin-left:50%;
            display: inline-block;
            width: 50px;
            height: 50px;
            background: url(valider.png);
            border: solid 0px black;
        }
    </style>
    <script type="text/javascript">

        function valideroperation () {
            
                    var element = document.getElementById('divdrage1');
                    element.parentNode.removeChild(element);
                    var drag = document.getElementById('divdropt91')
                    var jeton = document.createElement("img");
                    jeton.id = "divdrage1";
                    jeton.className = "divabsolute";
                    jeton.src = "sdiv.png";
                   jeton.setAttribute("draggable", "true");
                    jeton.ondragstart = inst.drag;
                    drag.appendChild(jeton);
        }

        function chifukoo() {
this.init();
        }
        chifukoo.prototype.dblclick = function (ev) {
            var element = document.getElementById(ev.target.id);
            var contenu = element.innerHTML;
            var iddrag = ev.dataTransfer.getData('IdElement');
            alert(iddrag);

        }
    chifukoo.prototype.drag = function (ev) {
        ev.dataTransfer.setData('IdElement', ev.target.id);
    }
    chifukoo.prototype.allowDrop = function (ev) {
        ev.preventDefault();
    }
chifukoo.prototype.drop = function (ev) {
    
    ev.preventDefault();
    var element = document.getElementById(ev.target.id);
    var contenu = element.innerHTML;
    var iddrag = ev.dataTransfer.getData('IdElement');
    var iddrop = element.id
    var zdrag = iddrag.substring(0, 8);
    var zdrop = iddrop.substring(0, 8);
    alert("iddrag =" + iddrag + "/iddrop =" + iddrop + "/zdrag =" +zdrag + "/zdrop =" + zdrop + "/contenu cible =" + contenu.length);
    ev.target.appendChild(document.getElementById(iddrag));



    }
	chifukoo.prototype.init = function () {
	    tbaide = document.createElement("table");
	    tbaide.className = "tbaide";
	    for (var i = 0; i < 10; i++) {
	        var wor = tbaide.insertRow(i);
	        for (var j = 0; j < 10; j++) {
	            var cel = wor.insertCell();
	            var dv = document.createElement("div");
	            dv.id = "divdropt" + ((i * 10) + j + 1);
	            dv.className = "div-drop";
	            dv.ondrop = this.drop.bind(this);
	            dv.ondragover = this.allowDrop.bind(this);
	            dv.ondblclick = this.dblclick.bind(this);
	               
	            cel.appendChild(dv);;
	        }
	    }
	    document.querySelector(".plateaucadre").appendChild(tbaide);
	var drag = document.createElement("div");
	drag.className = "div-drag";
	drag.id = "iddrag";
	drag.ondrop = this.drop.bind(this);
	drag.ondragover = this.allowDrop.bind(this);
	var j = 1;
	document.body.appendChild(drag);
	for (j = 0; j < 3; j++) {
	    var jeton = document.createElement("img");
	    jeton.id = "divdrage" + j;
	    jeton.className = "divabsolute";
	    jeton.src = "sdiv.png";
	    jeton.setAttribute("draggable", "true");
	    jeton.ondragstart = this.drag.bind(this);
	    drag.appendChild(jeton);
	}
}
	var inst = ''
onload=function(){inst = new chifukoo()}
    </script>
</head>
<body>
    <div class="plateaucadre">
        
    </div>
    <INPUT id='valideroperation' class='valideroperation' type="button" onclick="javascript:valideroperation()" title="Valider l'opération">
</body>
</html>


2 réponses

Réponse 1 / 2
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
11 mai 2016 à 16:55
pour récupérer l'id j'ai trouvé
var element = document.getElementById(ev.target.id);
var contenu = element.innerHTML;
var idclick = element.id;
Mais pas le parent pour le moment
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
11 mai 2016 à 18:04
bonjour...
heu... le code que tu nous montre peut se résumer en : 
var idclick = ev.target.id;
0
Réponse 2 / 2
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
11 mai 2016 à 17:30
pour récupérer l'id du parent j'ai trouvé
var node = document.getElementById(idclick).parentElement.id;
0

Discussions similaires

vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
Les id de pages
cs_bloom1 -
Linuss -

2 réponses
Récupérer l'attribut "id" de l'élément cliqué
biglover971 -
jordane45 -

3 réponses
php?id=
cs_brezoneg -
djangoboy -

1 réponse
Rejoignez-nous