coordonnées d'un clic souris sur une image

**marcuswgs84** · 14/01/2005, 19h02

Bonjour à tous,

je suis en train de créer une carte de france interactive ou les membres de mon site pourront insérer une icône là où ils habitent.

mon problème est le suivant:
à partir de la fonction "map" en html, je souhaiterais que lorsque je clique sur un point de la carte j'aille sur une autre page tout en obtenant la region et les coordonnées du clic.

j'essaie pour cela d'utiliser le javascript mais j'ai un gros problème de syntaxe ...
voici la fonction permettant de retourner le lien après clic de la souris :
(c'est cette fonction qui me pose problème car je ne comprends pas trop la syntaxe du javascript ...)

<script language="JavaScript">

function coordonnee (region)
{
var abscisse = document.images[france.gif].event.x; // abscisse
var ordonnee = document.images[france.gif].event.y; // ordonnee

var adresse="page.php";
var region="?region="+region;
var abscisse="&abscisse="+abscisse;
var ordonnee="&ordonnee="+ordonnee;

var adressetotale=adresse+region+et+abscisse+et+ordonnee;
return adressetotale;
}
</script>

je pourrais alors obtenir un truc du style: adressetotale=page.php?region=paca&abscisse=10&ordonnee=100

que j'utiliserai dans la fonction map:
<MAP NAME="france">
<AREA SHAPE="poly" COORDS="10,100,200" href="javascript:coordonnee(paca)" alt="paca">
</MAP>
<img src="france.gif" usemap="#france" >

Je débute est ce problème m'ennuie fortement.

Merci.

**Matthieu2000** · 17/01/2005, 10h03

avec un

input type='image'

tu as directement les coordonnées!

**SpaceFrog** · 17/01/2005, 10h14

Un truc qui peut peut être t'inspirer ...

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>infobulle sur area de map</title>
 
<script type='text/javascript'>
/*********************
* SCRIPT By SpaceFrog *
*        2004         *
 ********************/
 
var TabCoords = new Array();
var TabX = new Array();
var TabY = new Array();
 
 
 
function posarea(obj){
TopDiv=0;
LeftDIv=0;
ImgTop=0;
ImgLeft=0;
TabX.length=0;
TabY.length=0;
 
switch (obj.shape){
	case ('RECT'):
			TabCoords=obj.coords.split(',')
			SortCoords(TabCoords);
			TopDiv=TabX[0];
			LeftDiv=TabY[0];
			var imgTop =parseInt(document.getElementById('monimage').offsetTop);
			var imgLeft=parseInt(document.getElementById('monimage').offsetLeft);
			TopDiv=Number(TopDiv) + Number(imgTop);
			LeftDiv=Number(LeftDiv)+Number(imgLeft);
			Message='Ceci est un RECTANGLE';
			showbulle(TopDiv,LeftDiv,Message);	
			break;
 
	case ('CIRCLE'):
			TabCoords=obj.coords.split(',');
			LeftDiv=Number(TabCoords[0])-Number(TabCoords[2]);
			TopDiv=Number(TabCoords[1])-Number(TabCoords[2]);
			Message='ceci est un CERLCE'
			showbulle(TopDiv,LeftDiv,Message);	
			break;
 
	case ('POLY'):
			TabCoords=obj.coords.split(',')
			SortCoords(TabCoords);
			TopDiv=TabX[0];
			LeftDiv=TabY[0];
			var imgTop =parseInt(document.getElementById('monimage').offsetTop);
			var imgLeft=parseInt(document.getElementById('monimage').offsetLeft);
			TopDiv=Number(TopDiv) + Number(imgTop);
			LeftDiv=Number(LeftDiv)+ Number(imgLeft);
			Message='Ceci est un POLYGONE';
			showbulle(TopDiv,LeftDiv,Message);	
			break;
}			
 
function SortCoords(Coordonnees){
		   var j=0;
			for (i=0;i<Coordonnees.length;i=i+2){
				TabY[j]=Coordonnees[i];
				TabX[j]=Coordonnees[i+1];
				j++;
				}
			TabX.sort(sortNumbers);
			TabY.sort(sortNumbers)	
}
 
 
function showbulle(X,Y,Message){
var bulle= document.getElementById('infobulle');
bulle.style.top=X+'px';
bulle.style.left=Y+'px';
bulle.innerHTML=Message;
bulle.style.display='block';
}
 
 
function sortNumbers(a, b) {return a - b}
}
 
function hidebulle(){
document.getElementById('infobulle').style.display='none';
}
 
</script>
</head>
<body style="margin:0;">
<div id='infobulle' style="width:150px;height:20px;z-index:10;position:absolute;border:solid 1px red;background-color:lightyellow;text-align:center;display:none;position:absolute;" onmouseout="hidebulle()";>mon infobulle</div>
 
<map name="FPMap0">
<area href="http://" shape="rect" coords="294, 117, 376, 158" id='rectangle' onmouseover='posarea(this);this.focus();' >
<area href="http://" shape="rect" coords="340, 279, 384, 312" onmouseover='posarea(this);this.focus();' >
<area href="http://" shape="circle" coords="67, 188, 67" onmouseover='posarea(this);this.focus();' >
<area href="http://" shape="polygon" coords="145, 251, 152, 170, 180, 129, 198, 184, 221, 125, 139, 87, 162, 65, 210, 82, 251, 78, 258, 133, 288, 236, 208, 232, 215, 180, 156, 257" onmouseover='posarea(this);this.focus()' >
</map><img border="0" src="../images/image.gif"  id='monimage' width="385" height="313" usemap="#FPMap0">
 
</body>
 
</html>

**marcuswgs84** · 18/01/2005, 19h08

ok merci je vais essayer de m'en inspirer. maintenant si ça marche vraiment pas j'essaierai avec un input type image (comme l'a dit Matthieu2000)

coordonnées d'un clic souris sur une image

JavaScript

Discussions similaires

Partager

Partager