Page 1 sur 1
relever les coordonnées sur une image
Posté : 26 nov. 2005, 17:45
par jeff
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
Posté : 26 nov. 2005, 18:45
par Truc
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"> </p>
<p id="cartey"> </p>
<img src="carte.png" onClick="coord()"/>
Posté : 26 nov. 2005, 22:42
par dark_vidor
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)
Posté : 26 nov. 2005, 23:18
par Truc
Salut,dark_vidor deja dessus
utilise "onMouseMove" au lieu de "onMouseOver"
Inconvénient ... pas vraiment compatible avec FF
Posté : 26 nov. 2005, 23:24
par Moosh
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.
Posté : 26 nov. 2005, 23:44
par dark_vidor
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
Posté : 27 nov. 2005, 00:19
par Truc
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
Posté : 27 nov. 2005, 00:28
par dark_vidor
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
Posté : 27 nov. 2005, 00:54
par Truc
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
Posté : 27 nov. 2005, 15:30
par jeff
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
Posté : 27 nov. 2005, 16:45
par Truc
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.
Posté : 27 nov. 2005, 18:04
par jeff
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>
Posté : 27 nov. 2005, 18:26
par Truc
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)
Posté : 27 nov. 2005, 18:33
par jeff
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