Selection de zone sur image

Bonjour à tous,

Je vous explique mon problème, je suis débutant en javascript et je dois écrire un programme qui permet de sélectionner des zones d'une image.
En fait, j'affiche l'image en utilisant le php,et le programme doit me permettre à l'aide de la souris de cliquer sur l'image, ce qui doit tracer un rectangle sur l'image de manière à pouvoir récupérer les coordonnées de la zone.Ensuite, je dois pouvoir sélectionner d'autres zones et donc plusieurs rectangles seront présents sur l'image.
J'ai trouvé plusieurs codes sur internet mais je ne comprend pas du tout toutes les lignes de code, car cela est trop compliqué pour moi.
Est ce que quelqu'un pourrait m'expliquer ce que je dois faire car là j'avoue je suis perdue.

Merci par avance pour votre aide

Il me semble bien avoir déja vu passer ce type de problématique, il doit y avoir un script quelque part sur le forum ..

Merci pour la réponse, je vais essayer de voir, je viens de trouver ce script qui fonctionne très bien mais je n'y comprend pas grand chose :-(
j'essaye de récupérer les coordonnées à l'aide d'un formulaire mais cela ne fonctionne pas.
je ne sais pas comment faire,si vous pouvez m'aider ça serait super

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
<div id="container" style="position:relative;">
<img id="mon_image" src="IMG_0430.jpg" width="800" height="700" />
</div>
 
 <script language="JavaScript" type="text/JavaScript">
 
window.onload=function() {
  activate('mon_image');
};
function activate(id) {
  var el = document.getElementById(id),
  oX, oY, down = false,
  div, s;
  el.onmousedown = function(e) {
    oX = offset_X(el,e);
    oY = offset_Y(el,e);
    down = true;
    div = document.createElement('div');
    s = div.style;
    s.display = 'none';
    s.position = 'absolute';
    s.left = oX+'px';
    s.top = oY+'px';
    s.border = '2px solid #666666';
    s.background='rgba(150,150,256,0.3)';
 
    this.parentNode.appendChild(div);
 
    if(e.preventDefault) { e.preventDefault(); }
    else { e.returnValue = false; }
    return false;
  };
  document.body.onmousemove = function(e) {
    if(down) {
      var newX = offset_X(el,e),
      newY = offset_Y(el,e);
      s.display = '';
      if(newX<oX) { s.left = newX+'px'; }
      if(newY<oY) { s.top = newY+'px'; }
      s.width = Math.abs(newX-oX)+'px';
      s.height = Math.abs(newY-oY)+'px';
    }
  };
  document.body.onmouseup = function(e) {
    if(down) {
      var newX = offset_X(el,e),
      newY = offset_Y(el,e);
      s.display = '';
      if(newX<oX) { s.left = newX+'px'; }
      if(newY<oY) { s.top = newY+'px'; }
      s.width = Math.abs(newX-oX)+'px';
      s.height = Math.abs(newY-oY)+'px';
      alert('Départ : ('+oX+','+oY+')\nArrivée : ('+newX+','+newY+')');
    }
    down = false;
  }
}
 
function offset_X(el,event){
  if(event.offsetX) return event.offsetX;
  var ox = -el.offsetLeft;
  while(el=el.offsetParent){ ox += el.scrollLeft - el.offsetLeft; }
  return event.clientX + ox;
}
function offset_Y(el,event){
  if(event.offsetY) return event.offsetY;
  var oy = -el.offsetTop;
  while(el=el.offsetParent){ oy += el.scrollTop - el.offsetTop; }
  return event.clientY + oy;
}
</script>

Citation:

je ne sais pas comment faire

chercher sur le forum ?