Coordonnées d'un clic sur une image

**jacques-antoine** · 21/02/2008, 14h26

Qui connaît la solution pour obtenir les coordonnées d'un clic sur une image affichée en php? J'ai utilisé une fonction javascript qui permet d'obtenir ce résultat, encore qu'elle ne récupère que les coordonnées du clic dans la fenêtre et non celles de l'image, mais je ne vois pas comment transmettre le résultat obtenu à l'environnement php ... S'il existait une fonction similaire en php, ce serait le top.

Voici le code utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function localiser(e)
{
if(navigator.appName == 'Netscape')
  {
   document.captureEvents(Event.CLICK);
  }
if(navigator.appName == 'Microsoft Internet Explorer')
  {
   x = event.clientX;
   y = event.clientY;
  }
else
  {
   x = e.pageX;
   y = e.pageY;
  }
alert('x = ' + x + ', y = ' + y);
}
document.onclick=localiser;

**SpaceFrog** · 21/02/2008, 14h54

si tu mets un input type image ...
les coordonnées du click sont envoyées avec le form ...

quel est le but de la récupération des coordonnées ? tu veux en faire quoi après ?

____________________________________________________________________________________________

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body onload="alert(self.location.href)">
<form action="" onsubmit="this.action=self.location.href" method="get"/>
<input type='image' src="one.jpg"  />
</form>
</body>

étonnant non ?

**jacques-antoine** · 21/02/2008, 16h40

Mon propos est de générer automatiquement un ensemble de balises AREA en fonction des points x,y récupérés dans une image.

Alors pourquoi faire? Simple : quand on regarde une photo de classe (ref_image.jpg, par exemple), pas moyen de savoir qui est qui sans aller au bas de la page pour voir la liste, quand elle existe, ou de surcharger l'image par une incrustation... Donc, avec une passe préalable sur l'image, on repère une par une les têtes par la saisie d'une séquence de coordonnées – disons 4 couples, ou un seul si on décide d’utiliser le circle - prises autour, puis on lui associe une référence (le nom de l'élève) et on génère l’AREA correspondante, la référence se trouvant dans sa balise title et on la range dans le fichier ref_image.inc. À l'utilisation, le contenu de ce fichier est inséré dans le code de la page d'affichage à laquelle on a également passé en paramètre le nom de l'image. Ainsi, à chaque image correspond un fichier de balises AREA et à chaque tête correspond une AREA associée au nom qui s'affiche quand on passe sur la zone définie. Il n'y a pas d'erreur d'association possible puisque le nom du fichier à inclure est le même que celui de l'image : seule l'extension est différente.

En résumé, il y a 4 phases distinctes :

1 - celle où on récupère le ou les couples de coordonnées,
2 - celle où on récupère la référence associée,
3 - celle où on génère la balise AREA qu'on ajoute au fichier et enfin
4 - l'affichage avec insertion du fichier et le référencement de l'image.

Il y a donc de la cuisine à prévoir pour boucler sur les différentes acquisitions...

**SpaceFrog** · 21/02/2008, 16h45

le meilleur moyen pour genere des maps complexe est de passer par gimp et selectionner des zones puis exporter les chemins ...
tu recupères ensuite les fichiers exporter pour les parser ...

**jacques-antoine** · 21/02/2008, 17h04

ça être quoi, gimp? Un langage spécifique? Je suppose qu'on trouve de la doc sur le net? Mon problème est relativement simple, les AREAs prévues n'étant pas d'un niveau de complexité tel qu'il me faille un outil spécial.

J'ai essayé ton code et ça marche mais... mais ce que je voudrais, c'est récupérer les coordonnées de manière automatique : je clique et j'ai la réponse dans des variables $x et $y. Là, je tombe sur une alerte dont je ne peux rien faire sauf si j'ouvre une seconde fenêtre (l'alerte est bloquante : si je clique sur OK, je perds la réponse) et que j'y saisis les coordonnées fournies, juste ce que je voulais éviter...

**SpaceFrog** · 21/02/2008, 17h06

si je comprends bien tu as une image en ligne et c'est l'utilisateur qui a déposé la photo qui doit la mapper ?

**jacques-antoine** · 21/02/2008, 17h11

Non, l'image, c'est moi qui la mets à l'affichage et qui effectue les relevés topographiques au moment de la préparation. Mais ensuite, oui, c'est le visiteur du site qui va survoler l'image et être renseigné sur les identités, grâce aux AREAs que j'y aurais ajoutées pour lui simplifier la vie.

**SpaceFrog** · 21/02/2008, 17h14

ha ben si c'est juste pour faire ton mapping ...

downloade gimp ...
"equivalent" de photoshop ...

ouvre ton image
selectionne une region ...
selection vers chemin
exporte le chemin
puis ouvre le fichier ainsi créé par l'exportation
tu verras des coordonnées qui ressemblent curieusement à celle d'un area ...

**jacques-antoine** · 21/02/2008, 17h18

Danke... Je vais essayer de suite : ça m'a tout l'air d'être ce que je recherche. Bon, il va falloir que je travaille en deux passes mais le principal est que j'obtienne ce que je veux. D'une certaine manière, ça peut même me simplifier la vie.

Si ça colle, je reviens cliquer sur le bouton Résolu...

**SpaceFrog** · 21/02/2008, 17h20

C'est comme ça que j'ai mappé tous les départements sur une carte de france.
Tous les freeware que j'ai pu trouvé ne me permettaient pas de faire des zones polygonales ...

il doit y avoir en plus dans gimp un outil de mappage mais juste avec des cercles et des rectangles ...

**jacques-antoine** · 22/02/2008, 07h56

j'ai installé gimp : ok, il a l'air puissant mais c'est aussi une usine à gaz, du moins pour ce que j'envisage de faire pour le moment. D'un autre côté, il doit y avoir un problème chez moi puisque, quand je construit un chemin et que je veux le sauvegarder, il y a une espèce de zone qui s'ouvre en bas de la fenêtre et qui se ferme aussitôt... Pas moyen de mettre la main sur le code généré. Et puis, lors du téléchargement, l'aide n'était pas jointe.

Donc, j'en reviens à ma question initiale : en supposant que je n'aie besoin que d'un couple de coordonnées, comment est-ce que je peux obtenir ça simplement? Il existe des fonctions php qui permettent de connaître la valeur RVB d'un pixel mais aucune retournant les coordonnées?

On peut le faire également en javascript mais alors comment passer le résultat à php?

**SpaceFrog** · 22/02/2008, 09h18

J'ai bein un vieux bout de code qui traine ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="JavaScript"><!-- 
 
var e
function getMouse(e){
	var x,y;
	var elt = document.documentElement;
	if ( document.captureEvents ) {
		x = e.pageX;
		y = e.pageY;
	} else if ( window.event.clientX ) {
		x = window.event.clientX+elt.scrollLeft;
		y = window.event.clientY+elt.scrollTop;
	}
	window.mouseX = x;
	window.mouseY = y;
document.test.x.value = x; 
document.test.y.value = y; 
 
}
//(window.document.attachEvent)    ? window.document.attachEvent("onmousemove", getMouse) : window.addEventListener("mousemove", getMouse, false);
function populate(){document.onmousemove=function(event){getMouse(event)}}
//--></SCRIPT> 
 
</HEAD> 
 
<BODY  onload='populate()' > <!--mousemove="getMouse(event)"> <!-- onmousedown="microsoftMouseMove()" onmouseup="microsoftMouseMove()" --> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT TYPUE="TEXT" NAME="y" SIZE="4"> 
</FORM> 
 
</BODY> 
</HTML>

faudrait juste le remettre à la page, le nettoyer un peu, relativiser les coordonnées par rapport au offSet de l'image... et stocker tes coordonnées ...

**jacques-antoine** · 22/02/2008, 11h22

OK, ça passe bien de javascript à php, à condition de mettre la déclaration des champs d'affichage x et y avant la fonction populate()... Mais si, au lieu des mouvements de la souris, je pouvais récupérer l'événement clic, ce serait extra. Bon, tel que le code est écrit, les coordonnées obtenues sont celles de la fenêtre mais il me semble avoir vu passer une fonction qui permet de connaître la position d'un élément : en soustrayant les valeurs de position de celles du clic, je devrais retomber sur mes pattes. Est-ce qu'il existe un "getclick()" pour remplacer le getmouse() ou bien une variable particulière fournie par getmouse pour récupérer le clic?

**jacques-antoine** · 22/02/2008, 11h26

Eurêka!!! En remplaçant "onmousemove" par "onmousedown" je tombe pile poil sur ce que je cherchais... À la correction des valeurs près pour ne récupérer que les valeurs dans l'image et non dans la page.

Merci infiniment

**SpaceFrog** · 22/02/2008, 11h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<HTML> 
<HEAD> 
 
<SCRIPT type='text/javascript'><!-- 
var first=true
var x,y,x2,y2,topdiv,leftdiv,blx, bly
 
function microsoftMouseMove() { 
document.test.x.value = window.event.x; 
document.test.y.value = window.event.y; 
var message=(first)?'premier click':'second click';
if(first){ 
          x=window.event.x; 
          y=window.event.y;  
          topdiv=y
          leftdiv=x
} 
 
if(!first){
var sendem=confirm('validez vous la capture ?')
//ici il ne te reste plus qu'a chopper le top left top+height left+width ....
alert('coordonnées : x1='+x+' y1='+y+' et x2='+x2+' y2='+y2);
}
 
first=!first; 
} 
 
 
function drawdiv(){
document.getElementById('dotframe').style.display='none'
if (!first){
 			x2=window.event.x; 
          y2=window.event.y;
          document.test.x.value = window.event.x; 
			document.test.y.value = window.event.y; 
 
          topdiv=(y2<y)?y2:y;
          leftdiv=(x2<x)?x2:x;
          x2=(x2<leftdiv)?x:x2;
          y2=(y2<topdiv)?y:y2;
          blx=(x2<x)?x:x2;
          bly=(y2<y)?y:y2;
 
document.getElementById('dotframe').style.top=topdiv+'px';
document.getElementById('dotframe').style.left=leftdiv+'px';
document.getElementById('dotframe').style.height=(bly-topdiv)+'px';
document.getElementById('dotframe').style.width=(blx-leftdiv)+'px';
document.getElementById('dotframe').style.display='block';
}
}
//--></SCRIPT> 
 
</HEAD> 
 
<BODY onclick="microsoftMouseMove()" onmousemove="drawdiv()"> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT TYPUE="TEXT" NAME="y" SIZE="4"> 
</FORM> 
<div id="dotframe" style="position:absolute;display:none;height:0px;width:0px;background-color:none;border:1px gray;z-index:2;top:0px;left:0px;border-style:dotted;font-size:0px;"></div>
</BODY> 
</HTML>

Tiens j'ai retoruver un autre bout de code qui lui ne fonctionne que Sous IE, il faut juste réussir à faire le bon medley des deux codes...

**jacques-antoine** · 22/02/2008, 11h59

Non, ce que je suis en train de faire, je compte le refiler à quelques copains pas trop au fait de ces manips, techniquement hors de leur portée, et c'est justement pour leur faciliter la vie que je le fais. Mais je ne peux pas les obliger à changer de navigateur, déjà qu'ils ont des problèmes avec celui qu'ils ont et celui de leurs visiteurs...

Ce que j'ai réussi à obtenir (grâce à ton aide, évidemment) fonctionne à quelques ajustements près liés aux bizarreries d'Internet Explorer qui, décidément, ne fonctionne pas comme les autres : il y a une différence dans la réponse des coordonnées qu'il retourne par rapport à celles obtenues avec Firefox. J'ai donc un test supplémentaire à faire pour ajuster les valeurs. Quant aux fonctions dont je parlais (retrouver les coordonnées d'un objet), elles ne s'appliquent pas au contexte ordinaire php et de plus, elles sont expérimentales...

**SpaceFrog** · 22/02/2008, 12h06

sinon il reste les freeewares ...

http://www.freedownloadscenter.com/W...ng_Tools/free/

Coordonnées d'un clic sur une image

JavaScript

Discussions similaires

Partager

Partager