relever les coordonnées sur une image

26 nov. 2005, 17:45

salut
je doit utilisé js pour recuperer les coordonnées sur une image, mais je n'y arrive pas (au passeage je suis alergique a js)
voici mon bout de code

<script language="javascript" type="text/javascript">
function coord()
{
	tab = new Array();
	var x=0;
	var y=0;
	     x= event.x ;
	     y= event.y ;
	     document.getElementById('cartex').value=event.x;
	     document.getElementById('cartey').value=event.y;
	return tab(x,y);//essai
}
</script>
</head>
<body>

<p>carte de france</p>
<p id="cartex"></p>//affichage de coordonées
<p id="cartey"></p>
<img src="carte.png" onmouseover="coord()"/>

merci

26 nov. 2005, 18:45

Salut, proposition

<script language="javascript" type="text/javascript">
function coord()
{ 	
	document.getElementById("cartex").innerHTML=event.x;
	document.getElementById("cartey").innerHTML=event.y;    
}
</script>   
</head>
   <body>
   
   <p>carte de france</p>
<p id="cartex">&nbsp;</p>
<p id="cartey">&nbsp;</p>
<img src="carte.png" onClick="coord()"/>

26 nov. 2005, 22:42

Je souhaite réaliser la meme chose sauf que j'aimerais que les coordonnées apparaisent dans la bare des taches et pas au clic mais en survolant simplement ... es ce possible ?

un truc du style :

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
function coord()
{     
    x = document.getElementById("carte").innerHTML=event.x;
    y = document.getElementById("carte").innerHTML=event.y;
	window.status = "Coordonnées X:"+x+" / Y:"+y;    
}
</script>
      <img src="galaxie.jpg" onMouseOver="coord()" id="carte">

(j'ai aucune connaissance en js)

26 nov. 2005, 23:18

Salut,dark_vidor deja dessus

utilise "onMouseMove" au lieu de "onMouseOver"

Inconvénient ... pas vraiment compatible avec FF

26 nov. 2005, 23:24

Je pense pas que ce soit ce dont tu as besoin mais je profite de l'occasion pour le rappeler

si tu utilise le tag html
input
avec type=Image

tu obtiens une image qui a la même réaction qu'un bouton submit
mais dans $_POST tu as les coordonnée de l'endroit du clic sur l'image au pixel près.

26 nov. 2005, 23:44

Inconvénient ... pas vraiment compatible avec FF

la compatibilité firefox c'est pour la la fonction onmousemove ou pour le changement de la barre d'etat ?

parce que si c'est pour le texte en barre d'etat c'est bon j'ai une astuce pour ça

27 nov. 2005, 00:19

Inconvénient ... pas vraiment compatible avec FF
?? heu j'ai pas compris

FF=FireFox
valable pour "event" ....

Mais c'est bien ce que u voulais ?!

tu obtiens une image qui a la même réaction qu'un bouton submit
mais dans $_POST tu as les coordonnée de l'endroit du clic sur l'image au pixel près.

Tout a fait sauf que c'est en PHP et il faut valider le formulaire

j'y avais pensé un moment

27 nov. 2005, 00:28

heu ? je pense pas que ça soit ça ... parce que j'aimerais bien que le coin suppérieur gauche de mon image soit le 0,0 ...

au pire au lieu de modifier en barre des tache on affiche dans une input ... je suis sur que ça peut ce faire

mais comment c'est la la grande question

27 nov. 2005, 00:54

en effet j'étais un peu a coté de la plaque ... du coup en cherchant un peu sur google
vous devriez pouvoir vous en sorti avec ça

27 nov. 2005, 15:30

salut
je vois que mon poste a evolué, je n'est pas encore eut le temps de tester vos code, mais cependant je voudrais savoir si clientX est plus approprié (et surtout compatible )que event

27 nov. 2005, 16:45

clientX va de pair avec event mais le probleme est sourtout que ClientX prend les coordonnées pâr rapport a l'écran et non par rapport a l'image ... offsetX est plus adapté dans ce cas.

27 nov. 2005, 18:04

me revoila
j'aimerai rendre ce code compatible FF mais je ne sais pas faire
si event n'est pas connue(retourne false je presume)

function coord()
{
	if(event)
	{
		document.getElementById("cartex").innerHTML=event.offsetX;
    	document.getElementById("cartey").innerHTML=event.offsetY; 
	}
	else
	{
		document.getElementById("cartex").innerHTML=LayerX;
    	document.getElementById("cartey").innerHTML=LayerY; 
	}
   
}

</script>
</head>
<body>

<p>carte de france</p>
<label>X=</label><p id="cartex"></p>
<label>Y=</label><p id="cartey"></p>
<img src="carte.png" onmousemove="coord()" id="carte"/>
</body>


</html>

27 nov. 2005, 18:26

Layerx n'est pas plus dédinit sans "event", laltruiste as tu regardé le lien l'un de mes précédents posts ... il y a deja ce que tu veut pas besoin de réinventer la roue (en plus compatible FF)

27 nov. 2005, 18:33

j'ai adopter le code que tu a donnée plus haut

mais je voulais savoir comment faire pour savoir si une fonction javascript(ou objet) etait dispo sur le navigateur

relever les coordonnées sur une image

Qui est en ligne