Script facebook pour tagger les photos

Version imprimable

20/06/2007, 15h15
pacman69

Script facebook pour tagger les photos

Bonjour, cela fait une bonne semaine que je recherche le script (javascript) de faceook pour tagger les photos.

Si vous ne connaissez pas, je vais vous expliquer le principe :

1/ vous uploadez une photo quelconque, jusque la tout va bien

2/ le script permet de faire DES CADRES sur la photo que l'on ne verra pas par la suite (nommé pour l'exemple cadre 1 et 2) : ces cadres sont à mon avis des layers tout simple.

3/ par la suite vous avez la possibilité de nommé ces cadres.
Exemple : cadre1 renvoi à "ça c'est moi", cadre1 renvoi à "ça c'est toi".

Des lors que vous avez validé le tag et le texte à afficher : quand vous passez votre souris sur le cadre1 que l'on ne voit pas(hidden) un texte s'affiche en dessous de cette photo "ça c'est moi".

Je n'arrive vraiment pas a trouver ce script, j'ai essayé bcp de sites FR mais aussi anglais et américain.

Aidez moi ou redirigez moi svp!

( ps : pour tester www.facebook.com )
20/06/2007, 16h09
pacman69

en ayant recherchez un peu plus, beaucoup de gens m'indiquent de faire ca avec une infobulle.

Le probleme c'est qu'ici, je veux afficher du texte en dessous d'une image lors du passage de la souris dans une zone de l'image.
20/06/2007, 16h13
phydias

Citation:

Envoyé par pacman69

Le probleme c'est qu'ici, je veux afficher du texte en dessous d'une image lors du passage de la souris dans une zone de l'image.

Pourquoi ne pas juste utiliser l'évnement "onmouseover" afin de faire apparaître ton texte préalablement défini.

Phydias.
20/06/2007, 17h06
SpaceFrog

en fait le principe que tu décrit doit genérer un map et des shapes rectangle sur ton image à partir des cadres selectionnés (coordonnées de deux coins du cadre)...
il suffit ensuite d'affecter une fonction sur le onmouseover de chaque shape et
restituer un texte saisi dans une zone de légende sous l'image ...

Pour la première partie qui consiste à chopper les coordonnées sur l'image il y a une contribution sur le sujet ...
20/06/2007, 21h29
pacman69

ok et... comment je fais?

pouvez-vous m'indiquer de la documentation a ce sujet?
21/06/2007, 08h42
SpaceFrog

Commence par ça:
http://www.developpez.net/forums/sho...d.php?t=240026

une fois que la capture des coordonnées sera au point avec la souris (coordonnées des points opposés haut gauche / bas droit)
on verra comment créer dynamiquement un mapping de l'image et attribuer une action au survol des shapes
05/07/2007, 04h25
pacman69

Me revoila :D

j'avais encore quelques trucs a regler afin de commencer le gros "GROS" c'est-à-dire cette histoire de mapping.

Donc mon but général est :
Créer un calque sur une photo et suite au passage de la souris au dessus de ce calque, un texte s'affiche en dessous (de l'image)

Mes pages sont codées en php donc l'utilisateur pourra tagger photo par photo seulement. Pour cela j'utilise :
$img_pid=$_GET['pid']; avec un table sous SQL avec id (qui correspond au pid), user_id etc...

Je pense que la logique serait de créer une nouvelle table uniquement faite pour les "tags" (= les calques) sur la photo avec, par exemple :
"id" du tag
"pid" correspondant à l'image sur lequel se trouve le tag
"x" correspondant aux coordonnées x du tag
"y" correspondant aux coordonnées y du tag
"text" correspondant au texte que j'aimerais afficher en mouseover;

la difficulté est donc, dans un premier temps de récupérer les champs "x","y","text","pid" et de les insérer dans ma base de données puis, de trouver le moyen d'afficher ce texte lors du passage de la souris sur l'image.

N.B : j'ai quelque tres creuses connaissances en javascript, j'espere que vous pourrez m'aider; si vous ne pouvez pas ce n'est pas grave mais bon essayez de me rediriger!
05/07/2007, 14h27
pacman69

quelqu'un pourrait-il m'aider?
05/07/2007, 17h38
pacman69

SpaceFrog help me!!!

bon alors j'arrive maintenant a afficher sur une image des coordonnées inclus dans une base de données sql avec :
Code:

1 2 3 4 5 6 7 <map name="<? echo $tag1; ?>"> <area shape="rect" coords="<? echo $coordonnes; ?> href="#aaa" onMouseOver="bulle('<? echo $txt_affich; ?>',event)" onMouseOut="couic()" alt="rectangle"> </map> <center><img src="<? echo $img; ?>" width="<? echo $tail[0]; ?>" height="<? echo $tail[1]; ?>" usemap="#tag1" border="1"/> </center></td>
--------------------

Ya t'il moyen de recuperer les coordonnées ici de ce script js :
http://www.developpez.net/forums/sho...d.php?t=240026 ?

21/10/2008, 18h36
celinedecham

Bonjour, j'arrive à utiliser le script js sur une image pour fabriquer le cadre mais je ne sais pas comment faire pour récupérer les coordonnés, Pourriez-vous me le dire ?

Merci !

tiens un vieux turc qui ne fonctionne que sous IE pour le moment, masi au moins l'idée est là

Code:

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
<HTML> 
<HEAD> 
 
<SCRIPT type='text/javascript'><!-- 
var first=true
var xm,xy,x,y,x2,y2,topdiv,leftdiv,blx, bly;
var e
 
function populate(){document.onmousemove=function(event){getMouse(event)}}
 
function getMouse() { 
    var elt = document.documentElement;
    if ( document.captureEvents ) {
        xm = e.pageX;
        ym = e.pageY;
    } else if ( window.event.clientX ) {
        xm = window.event.clientX+elt.scrollLeft;
        ym = window.event.clientY+elt.scrollTop;
    }
 
}
 
function foo(){
    document.getElementById('x').value = xm; 
   document.getElementById('x').value = ym; 
 
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(){
 
    var elt = document.documentElement;
    if ( document.captureEvents ) {
        xm = e.pageX;
        ym = e.pageY;
    } else if ( window.event.clientX ) {
        xm = window.event.clientX+elt.scrollLeft;
        ym = window.event.clientY+elt.scrollTop;
    }
document.test.x.value = xm; 
document.test.y.value = ym; 
 
 
document.getElementById('dotframe').style.display='none'
if (!first){
             x2=xm; 
          y2=ym;
          document.getElementById('x').value =x2; 
            document.getElementById('y').value = y2; 
 
          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 onload="populate()" onclick="foo()" onmousemove="drawdiv(e)"> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" id="x" SIZE="4"> Y: <INPUT TYPE="TEXT" id="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>

22/10/2008, 10h22
le_chomeur

Mouai moi je l'aurais joué plus fine :

- Div contenante avec en fond la photo ( donc div crée en fonction de la taille de la photo ;) )

- création d'autre div a la souris pour entouré la tete des personnes

- ajout des évènements lié au survol de ces divs :)

moi j'dis ça ...

voici la base :

création de div avec redimensionnement dynamique :

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.square {
border: 1px solid #FF0000;
position: absolute;
}
-->
</style>
<script type="text/JavaScript">
var d;
var posx;
var posy;
var initx=false;
var inity=false;
 
//Récupération de la position de la souris en fonction de la div parente
function getMouse(obj,e){
	posx=0;posy=0; //Initialisation des variable
	var ev=(!e)?window.event:e;//On test l'évènement si pour firefox ou ie
	//Firefox
	if (ev.pageX){
		posx=ev.pageX+window.pageXOffset;
		posy=ev.pageY+window.pageYOffset;
	}
	//Ie
	else if(ev.clientX){
		posx=ev.clientX+document.body.scrollLeft;
		posy=ev.clientY+document.body.scrollTop;
	}
	//Ajout d'une méthode sur la div : dès que l'on click , on lance la création d'une div
	obj.onmousedown=function(){
	//Initialisation de la position de la souris
	initx=posx;
	inity=posy;
	//Création d'une div
	d = document.createElement('div');
	d.className='square'
	//Positionnement
	d.style.left=initx+'px';
	d.style.top=inity+'px';
	//Ajout dans le document ( on aurait pu l'ajouter dans la div mais plus contraignant .... )
	document.getElementsByTagName('body')[0].appendChild(d)
	}
	//On ajoute une méthode pour détecter le relachement de la souris sur la div parente
	obj.onmouseup=function(){initx=false;inity=false;}
	//On test si la souris est mousedown on modifit en live la position et la taille de la div que l'on vient de créer
	if(initx){
		d.style.width=Math.abs(posx-initx) +'px';
		d.style.height=Math.abs(posy-inity)+'px';
		d.style.left=posx-initx<0?posx + 5 +'px':initx-5+'px';
		d.style.top=posy-inity<0?posy+5+'px':inity-5+'px';
	}
}
</script>
</head>
<body>
<div style="position:absolute;margin-top:-200px;top:50%;margin-left:-200px;left:50%;width:400px;height:400px; border:2px dashed #666;" onmousemove="getMouse(this,event)">
</div>
</body>
</html>

RAF :
- drag and drop de ces div
- suppression
- menu pour ajouter les commentaires
- gestion de l'envoi des informations des div + commentaire pour enregistrement

En fait j'ai modifiée la dernière fonction du js (creation) pour pouvoir récupérer les valeurs :

Code:

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
 
function creation(){
   div.style.border = "2px dashed #ff0000";
 
   if(debX <= arrX){
      div.style.width = arrX-debX+"px";
      div.style.left = debX+"px";
      document.getElementById('Pos_left').value =  debX ;
      document.getElementById('Pos_width').value = arrX-debX ;
   }
   else{
      div.style.width = debX-arrX+"px";
      div.style.left = arrX+"px";
      document.getElementById('Pos_left').value = arrX ;
      document.getElementById('Pos_width').value = debX-arrX ;
   }
   if(debY <= arrY){
      div.style.height = arrY-debY+"px";
      div.style.top = debY+"px";
      document.getElementById('Pos_height').value =  arrY-debY ;
      document.getElementById('Pos_top').value = debY ;
   }
   else{
      div.style.height = debY-arrY+"px";
      div.style.top = arrY+"px";
      document.getElementById('Pos_height').value =  debY-arrY ;
      document.getElementById('Pos_top').value = arrY ;
   }
   div.style.lineHeight = "2px";
   div.style.fontSize = "2px";
   div.style.position = "absolute";
   document.getElementById('gnia').appendChild(div);
}

Et dans mon php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
echo '<form action="test1.php" method="post" name="adminForm">'
.'<table align="center">'
	.'<tr>'
		.'<td id="cadrea">'
		.'<div id="gnia" name="fin" onmousedown="debut(event)" onmouseup="fin()">'
    		.'<img src="test1.jpg" alt="" />'
   		.'</div>'
    		.'<input type="hidden" name="subop" value="testab" />'
    		.'<input type="hidden" id="Pos_left" name="Pos_left" />'
    		.'<input type="hidden" id="Pos_top" name="Pos_top" />'
    		.'<input type="hidden" id="Pos_width" name="Pos_width" />'
    		.'<input type="hidden" id="Pos_height" name="Pos_height" />'
    		.'<input type="submit" class="adm_bouton" value="Valider" />'
    	.'</td>'
    .'</tr>'
.'</table>'
.'</form>';

voila ou j'en suis de mon coté :

Code:

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
 
.square {
	border: 1px solid #FF0000;
	position: absolute;
}
.squareBlue{
	border: 1px solid green;
	background-color:#ccc;
	position: absolute;
}
</style>
<script type="text/JavaScript">
var d;
var posx;
var posy;
var initx=false;
var inity=false;
var MyObj = null;
var newPosX = null;
var newPosY = null;
var objectToDrag = null;
var minLeft = null;
var maxRight = null;
var minTop = null;
var maxBottom = null;
 
//Récupération de la position de la souris en fonction de la div parente
function getMouse(obj,e){
	MyObj = obj;
	//obj.onmouseout = function(){endDrag()};
	posx=0;posy=0; //Initialisation des variable
	var ev=(!e)?window.event:e;//On test l'évènement si pour firefox ou ie
	//Firefox
	if (ev.pageX){
		posx=ev.pageX+window.pageXOffset;
		posy=ev.pageY+window.pageYOffset;
	}
	//Ie
	else if(ev.clientX){
		posx=ev.clientX+document.body.scrollLeft;
		posy=ev.clientY+document.body.scrollTop;
	}
	//Ajout d'une méthode sur la div : dès que l'on click , on lance la création d'une div
	obj.onmousedown=function(){
	//Initialisation de la position de la souris
	initx=posx;
	inity=posy;
	//Création d'une div
	d = document.createElement('div');
	d.className='square'
	d.onmousedown= function(event){beginDrag(this,event);};
	document.onmouseup=function(){endDrag()};
	d.onmousemove = function(event){drag(event)};
	//Positionnement
	d.style.left= initx +'px';
	d.style.top=inity+'px';
	//Ajout dans le document ( on aurait pu l'ajouter dans la div mais plus contraignant .... )
	document.getElementsByTagName('body')[0].appendChild(d);
	document.getElementById('debug').innerHTML += "Creation div" + "<br />";
	}
	//On ajoute une méthode pour détecter le relachement de la souris sur la div parente
	obj.onmouseup=function(){initx=false;inity=false;}
	//On test si la souris est mousedown on modifit en live la position et la taille de la div que l'on vient de créer
	if(initx){
		d.style.width=Math.abs(posx-initx) +'px';
		d.style.height=Math.abs(posy-inity)+'px';
		d.style.left=posx-initx<0?posx + 5 +'px':initx-5+'px';
		d.style.top=posy-inity<0?posy+5+'px':inity-5+'px';
		document.getElementById('toto').innerHTML = "posx : " + posx+"<br />"
													+"posy : " + posy+"<br />";
	}
}
 
function redimBox(){
		d.style.width=Math.abs(posx-initx) +'px';
		d.style.height=Math.abs(posy-inity)+'px';
		d.style.left=posx-initx<0?posx + 5 +'px':initx-5+'px';
		d.style.top=posy-inity<0?posy+5+'px':inity-5+'px';
}
function findPos(obj) {
	//position x / y de l'objet
    var x = obj.offsetLeft || 0;
    var y = obj.offsetTop || 0;
	//tant qu'il y a un parent, on ajoute la position de son parent
    while (obj = obj.offsetParent) {
        x += obj.offsetLeft
        y += obj.offsetTop
    }
	//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
    return new Array(x,y);
}
 
function getPositionCurseur(e){
	var ev = (!e)?window.event:e;//On test l'évènement si pour firefox ou ie
	//ie
	if(document.all){
		curX = ev.clientX;
		curY = ev.clientY;
	}
 
	//netscape 4
	if(document.layers){
		curX = ev.pageX;
		curY = ev.pageY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = ev.clientX;
		curY = ev.clientY;
	}
}
 
function beginDrag(p_obj,e){
	isDragging = true;
	objectToDrag = p_obj;
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e){
 
	if(isDragging == true){
 
	getPositionCurseur(e);
	newPosX = curX - ecartX;
	newPosY = curY - ecartY;
	if(isInX()){
		objectToDrag.style.left = newPosX + 'px';
	}
	if(isInY()){
		objectToDrag.style.top = newPosY + 'px';
	}
		objectToDrag.className='squareblue';
	}
 
}
 
function isInX(){
	//Récupération des points
	minLeft = MyObj.offsetLeft ;
	maxRight = minLeft + MyObj.offsetWidth ;
	minTop = MyObj.offsetTop ;
	maxBottom = minTop+MyObj.offsetHeight;
 
	var etat =  true;
 
	if(newPosX < (minLeft+5)){
		etat = false ;
	}
	if((newPosX + objectToDrag.offsetWidth) > (maxRight-5)){
		etat = false ;
	}
	document.getElementById('toto').innerHTML = etat;
	return etat;
}
function isInY(){
 
	//Récupération des points
	var minTop = MyObj.offsetTop ;
	var maxBottom = minTop+MyObj.offsetHeight;
 
	var etat =  true;
 
	if(newPosY < (minTop+5)){
		etat = false ;
	}
	if((newPosY + objectToDrag.offsetHeight) > (maxBottom-5)){
		etat = false ;
	}
 
	document.getElementById('toto').innerHTML = etat;
	return etat;
}
 
 
function endDrag(){
isDragging = false;
if(objectToDrag != null)objectToDrag.className='square';
}
 
isDragging = false;
 
//Function permettant d'oculter un bug si l'on relache le bouton sur une div ou en dehors de la div parente
function initXFalse(){
	initx = false;
	inity = false;
}
 
function Add_Event( obj_, event_, func_ ){
  //-- Firefox
  if( obj_.addEventListener )
    obj_.addEventListener( event_, func_, false);
  //-- pour IE
  if( obj_.attachEvent )
    obj_.attachEvent( "on" + event_, func_); // ajout de "on" devant l'event
}
 
 
</script>
</head>
<body onload="Add_Event(document, 'mouseup', initXFalse);Add_Event(document, 'mousemove', drag);">
<div id="debug" style="width:500px;height:100px;overflow:auto;border:1px solid red">
</div>
<div style="position:absolute;margin-top:-200px;top:50%;margin-left:-200px;left:50%;width:400px;height:400px; border:2px dashed #666;" onmousemove="getMouse(this,event)">
</div>
 
<div style="width:500px;height:100px;overflow:auto;border:1px solid red" id="toto">
</div>
</body>
</html>

- création des divs avec dimensionnement dynamique
- drag and drop des divs

raf :
- Redimmensionnement
- Ajout de la possibilité de taggé ( champs formulaire associé a la div )
- enregistrement php

Bon le code est encore en train d'évoluer selon mes test et dev mais ça te permet de voir une base, il y a un bug sous Firefox on ne peut pas draguer 2 fois de suite la même div , je cherche , je cherche

26/11/2008, 10h16
geek34

http://www.fotonotes.net/#installations

une source très utile ;)