Recuperation de l'ID D'un DIV

Version imprimable

Bonjour,
Un probleme qui a l'air simple. j'ai un DIV et je veux recuperer par $_GET les valeurs du click de ma asouris et l'ID du DIV. Pour le click ca marche mais j'arrive pas a recuperer l'ID du DIV ... Pouvez vous m'aider. Merciiiiiiii

LE JAVASCRIPT
---------------------------------------------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
function sourisxy(id,e)
{
id = document.getElementById('id');
x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
// alert("x:"+x+" y:"+y);
window.location.href="test_tableau.php?x="+x +"&y="+y +"&id="+id;
}
 
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.mousemove);
document.onclick = sourisxy;
 
</script>

LE DIV
--------------------------------

Code:

1
2
3
4
5
6
 
 
      <div id="id1" onclick="sourisxy(id1,e)" style="z-index: 1;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
 
 <div id="id2" onclick="sourisxy(id2,e)" style="z-index: 2;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
        <div id="id3" onclick="sourisxy(id3,e)" style="z-index: 3;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute;

22/07/2008, 14h01
SpaceFrog
Code:

onclick="sourisxy(this,e)"
Code:

1 2 3 4 5 <script> function sourisxy(obj,e) { id = this.id
22/07/2008, 14h02
Bovino

Code:

id = document.getElementById('id');

C'est ballot, id est à la base l'id de la div mais là tu lui assignes l'élément correspondant...
Ca fonctionnera en supprimant cette ligne.

Merciii mais toujours un pb id=undefined

Ca me renvoi id=undefined .. une idée
Merci de votre aide en tout cas

je remet le code corrigé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<script>
function sourisxy(obj,e)
{
id = this.id;
x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
// alert("x:"+x+" y:"+y);
window.location.href="test_tabkeau.htm?x="+x +"&y="+y +"&id="+id;
}
 
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.mousemove);
document.onclick = sourisxy;
 
</script>

et les DIV
--------------------------

Code:

1
2
3
4
5
 
 
<div id="id1" onclick="sourisxy(this,e);" style="z-index: 1;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
        <div id="id2" onclick="sourisxy(this,e);" style="z-index: 2;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
        <div id="id3" onclick="sourisxy(this,e);" style="z-index: 3;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute; top:25px;"></div>

22/07/2008, 14h16
SpaceFrog

:oops:

Code:

id = obj.id;

Presqueeeee

Heu le lien ne fonctionne plus j'ai une erreur javascript au niveau de la ligne rouge avec noté object null ou non existant ...
Merciii en tout cas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function sourisxy(obj,e)
{
id = obj.id;
x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
// alert("x:"+x+" y:"+y);
window.location.href="test_tabkeau.htm?x="+x +"&y="+y +"&id="+id;
}

if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.mousemove);
document.onclick = sourisxy;

</script>

LE DIV
-------------------------------------

Code:

1
2
3
<div id="id1" onclick="sourisxy(this,e);" style="z-index: 1;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
<div id="id2" onclick="sourisxy(this,e);" style="z-index: 2;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
<div id="id3" onclick="sourisxy(this,e);" style="z-index: 3;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute; top:25px;"></div>

22/07/2008, 14h28
SpaceFrog

normal ton document n'est pas instancié au moment ou la ligne est interprétée ...
il faut passer par le body.onload

et surtout faire document.body.onclick ...
22/07/2008, 14h29
grandpa006

un petit peu plus ... ;-)

Heu je ne crois pas que mon javascript soit à ce niveau.
C'est à dire je dois mettre quoi ou ?
Merci de ton aide ......

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function sourisxy(obj,e)
{
id = obj.id;
x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
// alert("x:"+x+" y:"+y);
window.location.href="test_tabkeau.htm?x="+x +"&y="+y +"&id="+id;
}
 
function init(){
if(navigator.appName.substring(0,3) == "Net")
document.body.captureEvents(Event.mousemove);
document.body.onclick = sourisxy;
}
</script>

Code:

<body onload="init()">

Je sais que j'insiste mais c'est comme une bouée de sauvetage

Alors j'ai une erreur à la ligne rouge "objet attendu".
Si il te reste une idée dans les cartons je prends. Merci de ton ecoute.
Je te met tout mon code pour tester eventuellement.
MERCIIIIIIIIIIIIIIIIIIII

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.Style8 {font-size: 10px; font-family: Arial, Helvetica, sans-serif; }</style>
<script>
function sourisxy(obj,e)
{
	id = obj.id;
	x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
	y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
	window.location.href="test3.html?x="+x +"&y="+y +"&id="+id;
}
if(navigator.appName.substring(0,3) == "Net")
	document.body.captureEvents(Event.mousemove);
	document.body.onclick = sourisxy;
</script>
</head>

<body onload="init()">
<div id="id1" onclick="sourisxy(this,e);" style="z-index: 1;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
<div id="id2" onclick="sourisxy(this,e);" style="z-index: 2;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
<div id="id3" onclick="sourisxy(this,e);" style="z-index: 3;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute; top:25px;"></div>
</div>  

</body>
</html>

22/07/2008, 14h54
E.Bzz

Bonjour,
tu as oublié de définir la fonction Init() (cf. ci-dessus) ;)

A+
22/07/2008, 15h12
SpaceFrog

ben oui ...

Code:

function init(){
22/07/2008, 15h14
grandpa006

Encore une piste

J'ai remplacé init() par sourisxy() dans le body onload mais ca ne marche toujours pas.

J'ai tyester un onclick="alert(this.id);" sur le lien et il m'indique que l'ID est bien transmis, mais j'arrive pas à mieux.

Help pleaseeee
22/07/2008, 15h19
SpaceFrog

...
qui t'as dit de remplacer quoi que ce soit ??? 8O8O8O8O8O

as tu vu le code que j'ai donné ?????? :roll::roll::roll::roll:

Heu j'avais pas vu ton message. j'ai tout remis comme tu m'as dit seul le function init(){ je sais pas ou le mettre.

Désolé de mon ignorance, j'espère ne pas vous agacer.

Merci de votre patience.

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.Style8 {font-size: 10px; font-family: Arial, Helvetica, sans-serif; }</style>
<script>
function sourisxy(obj,e)
{
	id = obj.id;
	x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
	y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
	window.location.href="test3.html?x="+x +"&y="+y +"&id="+id;
}
if(navigator.appName.substring(0,3) == "Net")
	document.body.captureEvents(Event.mousemove);
	document.body.onclick = sourisxy;
 
</script>
</head>
 
<body onload="init();">
<div id="id1" onclick="sourisxy(this,e);" style="z-index: 1;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
<div id="id2" onclick="sourisxy(this,e);" style="z-index: 2;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
<div id="id3" onclick="sourisxy(this,e);" style="z-index: 3;	margin-left: 0px; margin-top: 0px; opacity: 1;	width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute; top:25px;"></div>
</div>  
 
</body>
</html>

Citation:

Envoyé par grandpa006

seul le function init(){ je sais pas ou le mettre.

Pas la peine de te poser la question : fais comme te l'a montré SpaceFrog
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script> function sourisxy(obj,e) { id = obj.id; x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft; y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop; // alert("x:"+x+" y:"+y); window.location.href="test_tabkeau.htm?x="+x +"&y="+y +"&id="+id; } function init(){ if(navigator.appName.substring(0,3) == "Net") document.body.captureEvents(Event.mousemove); document.body.onclick = sourisxy; } </script>
Sans rien changer d'autre ...

A+

La solution

Merci de votre participation à ce probleme ... qui en posera surement d'autres. Pour ceux qui se posent la question , comment recuperer le DIV d'un calque ainsi que les coordonnées de la souris, voila la solution

UN GRAND MERCI A TOUS A bientot !!!!

Code:

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.Style8 {font-size: 10px; font-family: Arial, Helvetica, sans-serif; }</style>
	<script>
        function souriceau(s)
            {
                if(navigator.appName.substring(0,3)=="Net")
                    {
                        setX = s.clientX+document.body.scrollLeft;
                        setY = s.clientY+document.body.scrollTop;
                    }
                if(navigator.appName.substring(0,3)!="Net")
                    {
                        setX=event.x+document.body.scrollLeft;
                        setY=event.y+document.body.scrollTop;
                    }
            }
        document.onmousemove=souriceau;
 
        var ixe
 
        function sourisxy(monid)
            {
                ixe=" x"+setX +" y="+setY+" id="+monid;
                alert(ixe)
window.location.href="recup.php?x="+setX +"&y="+setY +"&id="+monid;
            }
 
    </script>
 
</head>
    <body>
        <div id="id1" onclick="sourisxy(this.id);" style="z-index: 1; margin-left: 0px; margin-top: 0px; opacity: 1; width: 160px; height: 125px; border: 1px dashed #900; background-color: red;position:relative;">
        <div id="id2" onclick="sourisxy(this.id);" style="z-index: 2; margin-left: 0px; margin-top: 0px; opacity: 1; width: 160px; height: 50px; border: 1px dashed #900; background-color: yellow;position:absolute; top:50px;"></div>
        <div id="id3" onclick="sourisxy(this.id);" style="z-index: 3; margin-left: 0px; margin-top: 0px; opacity: 1; width: 160px; height: 25px; border: 1px dashed #900; background-color: green;position:absolute; top:25px;"></div>
        </div>
    </body>
</html>

22/07/2008, 17h14
SpaceFrog

Code:

document.onmousemove

:vomi: