Forum « Aide pour recuperation coordonnées image »

Forum « Programmation Javascript » (archives)

Aide pour recuperation coordonnées image

Envoyé: 10 juin 2005, 3h03 par elodie34

Slt, j'ai un gros pbe ça fait plusieurs jours que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées, dans ma table, d'une image que je place sur une autre image à l'aide de clic.... c dur à expliquer alors j'envoie mon code : le dossier contient 4 petites images png (voiture_a, voiture_b,voiture_c, voiture_d) et une grande image png(pieds_dessus)
Examen.htm :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Traffic</title>
<script src="examen.js"></script>

</head>
<center><h1>FICHE D'EXAMEN</h1></center>
<body onload="initialiser();">
<div id="pieds"></div>
<form name="frm" action="javascript : void(0);" method ="post">
<table><tr><td>Quelle maladies ? </td></tr>
<tr><td><input name="direction" type="radio" value="a" checked>Clou plantaire</td></tr>
<tr><td><input name="direction" type="radio" value="b" >hyperkératose</td></tr>
<tr><td><input name="direction" type="radio" value="c" >mycose </td></tr>
<tr><td><input name="direction" type="radio" value="d" >ongle incarné</td></tr>
</table><br></form></body>

</html>

Examen.js :

/* INITIALISATION */

var id = 0; /* numéro de la voiture */
var couleurs; /* direction de la voiture */

function bouton_radio(name)
{
var valeur = document.getElementsByName(name);
for (var i=0; i<valeur.length; i++)
{
if (valeur[i].checked)
{
return valeur[i].value;
}
}
}

function position(x, y, id)
{
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.position = "absolute";
document.getElementById(id).style.left = x-50;
document.getElementById(id).style.top = y+10;
}

function nvelle_voiture(pos_x, pos_y, unique)
{
id++;
var w = document.body.clientWidth;
var m = document.body.clientHeight;
var x;
var y;

if (unique == 'true')
{
couleurs = bouton_radio('direction');

}
var img = document.createElement('image');
img.src = 'image/voiture_'+couleurs+'.png';
img.id = id;
img.width =img.height = 50; //taille de l'image

document.body.appendChild(img);
switch(couleurs)
{

case 'a':
x = pos_x;
y = pos_y;
break;
case 'c':
x = pos_x;
y = pos_y;
break;
case 'b':
x = pos_x;
y = pos_y;
break;
case 'd':
x = pos_x;
y = pos_y;
break;

};
position(x, y, id);
}

function initialiser()
{
document.getElementById("pieds").onclick = nvelle_voiture_onclick;
}

function nvelle_voiture_onclick(evt)
{
var xcoord;
var ycoord;
if (typeof evt!= "undefined")
{
xcoord=evt.pageX;
ycoord=evt.pageY;
}
else if (typeof event !="undefined")
{
xcoord = event.clientX;
ycoord = event.clientY;
}
nvelle_voiture(xcoord, ycoord,'true' );
}

mon fichier examen.css :

form

{

position: absolute;

top: 30%;

right: 10%;

width: 50px;

padding: 80%;

}

#pieds

{

padding: 53%;

background-image: url("image/pieds_dessus.png");

position: absolute;

top: 30%;

right: 40%;

width:31%;

}

J'espere que j'aurais vite des reponses c'est super urgent pour moi alors merci d'avance pour votre aide !!!