image cliquable [Trucs & Astuces]

**kespy13** · 13/04/2006, 08h49

salur a tous

je debute en javascript, et je cherche a faire un script me permettant de cliquer sur une image et de recuperer les coordonnées du clic, si vous pourriez m'aider

merci

**denisC** · 13/04/2006, 09h32

Envoyé par kespy13

je debute en javascript, et je cherche a faire un script me permettant de cliquer sur une image et de recuperer les coordonnées du clic, si vous pourriez m'aider

onclick sur l'image + coordonnées du click à comparer aux coordonnées de l'image.

Cf la

, une grande partie doit être dedans.

C'est pour faire quoi, si c'est pas indiscret?

**kespy13** · 13/04/2006, 09h50

en fait je dois afficher l'image et cliquer dessus pour definir une zone cliquables, mon but est en fait de creer en ligne des images cliquables

**denisC** · 13/04/2006, 10h10

Envoyé par kespy13

en fait je dois afficher l'image et cliquer dessus pour definir une zone cliquables, mon but est en fait de creer en ligne des images cliquables

Ca peut pas se faire avec des MAP HTML, ça?

**kespy13** · 13/04/2006, 22h21

oui mais mon but es de creer un site pour creer ds images cliquables

**denisC** · 14/04/2006, 08h37

Envoyé par kespy13

oui mais mon but es de creer un site pour creer ds images cliquables

D'accord, j'ai compris l'interet de la chose.

Pour le comment, il faut la coordonnée de la souris, celle de l'image et en déduire la position relative de l'une par rapport à l'autre.

Cf

**titoumimi** · 14/04/2006, 08h56

Sinon, en utilisant des input type=image, on peut également récupérer les coordonnées, et ce directement sur l'image...

**SpaceFrog** · 14/04/2006, 09h24

titou ... les coordonnées du submit , pas celles du curseur ! et c'est également possible sur un image img ...
là le souci semble être de pouvoir récupérer les coordonnées realtives du curseur sur l'image ...

**SpaceFrog** · 14/04/2006, 11h15

milles excuses titou :red:
he bé oui en clickant sur un input type image les coordonnées relatives du curseur sur l'image au moment du click sont automatiquement passées en paramètres ...

nomImange.x=99&nomImage.y=99 dans l'url !!

le seul souci est que le click sur l'image soumet le formulaire... alors voici comment j'ai réussi à le détourner ..

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Position curseur sur image</title>
<script type='text/javascript'>
function imageclick(){
var params=document.location.href
params=params.split('\=')
var posX=params[1].split("\&")[0]
var posY=params[2].split("\&")[0]
alert('x='+posX+' et y='+posY)
}
</script >
</head>
<body>
<form name="myform" onsubmit="imageclick()" method='get'>
<input type="image" name="monimage" src="snow.gif"/>
</form>
</body>
</html>

encore merci à titou de nous avoir pointé cette particularité de l'input image

**denisC** · 14/04/2006, 11h17

Envoyé par titoumimi

Sinon, en utilisant des input type=image, on peut également récupérer les coordonnées, et ce directement sur l'image...

coté serveur. Coté client, il faut un peu plus de bidouille.

Parceque la solution de SF

**SpaceFrog** · 14/04/2006, 11h20

ben quoi elle est pas belle ma solution

:

**denisC** · 14/04/2006, 11h22

Envoyé par SpaceFrog

ben quoi elle est pas belle ma solution

:

Ben en l'occurence, comme le monsieur il a besoin de deux points dans son image (au moins) pour définir un rectangle cliquable, il va devoir repasser les coordonnées du premier clic par un input caché.

Enfin, c'est simplement pour dire que ta solution avec faire beaucoup d'aller-retour client/serveur par simple facilité (et oui, osons le mot), alors qu'on pourrait très bien s'en sortir sans. Mais bon, toute solution qui marche est valide

**SpaceFrog** · 14/04/2006, 11h33

he j'avais pas suivi pour les deux clics ...

ben suffit de stocker le premier click ...
et heu comment dire y'a pas d'aller retour sur le serveur puisque je n'ai pas d'action dans le form

sinon j'avais codé ça :

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
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="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 ....
}
 
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>

**denisC** · 14/04/2006, 11h35

Envoyé par SpaceFrog

ben suffit de stocker le premier click ...
et heu comment dire y'a pas d'aller retour sur le serveur puisque je n'ai pas d'action dans le form

Pas bete, en effet. Bon, ben j'ai rien dit alors. Je vais effacer tous mes messages (quel bonheur d'être modo, on peut dire des conne... et les effacer)

**titoumimi** · 14/04/2006, 11h47

pis au pire, on peut même passer par le serveur de facon transparente avec un XMLHttpRequest

**SpaceFrog** · 14/04/2006, 12h02

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Position curseur sur image</title>
<script type='text/javascript'>
var done=0
 
function imageclick(){
switch (done){
case '0' : 	var params=document.location.href
			params=params.split('\=')
			document.getElementById('startX').value=params[1].split("\&")[0]
			document.getElementById('startX').value=params[2].split("\&")[0]
			done++;
			return false;
			break;
case '1': document.forms['myform'].action=pageaction.htm;
			return true;
			break;
			}
 
}
</script >
</head>
<body>
<form name="myform" action='' onsubmit="imageclick()" method='get'>
<input type="image" name="monimage" src="snow.gif"/>
<input type="hidden" name='startX' id='startX'/>
<input type="hidden" name='startY' id='startY'/>
</form>
</body>
</html>

image cliquable [Trucs & Astuces]

JavaScript

Discussions similaires

Partager

Partager