[POO] identifiant d'une variable

Hello World ;)

Je veux créer un objet dont la méthode display() affiche une balise <div> contenant une image. Quand on passe sur l'image, <div> border est affiché. Lorsqu'on sort de l'image, <div> border est effacé. Lorsqu'on clique sur l'image, <div> border est affiché en couleur et ne disparait plus jusqu'à ce qu'on reclic sur l'image.

Le tout fonctionne bien mais il y a un truc qui me chiffonne et je voulais demander l'avis des experts de ce forum :D

obj1 = new ImgPicker('obj1', 'ImgPicker1', 'img.jpg');

Est-ce que je pourrais me passer du premier argument dans la ligne ci-dessus et si oui, comment je fais après dans le 2ème writeln de la méthode display ?

Merci d'avance !

EDIT : j'oubliais.. ça fonctionne seulement sous FF..

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
 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<script type="text/javascript">
 
  function ImgPicker(varName, nodeId, imgUrl) {
    this.varName = varName;
    this.selected = false;
    this.nodeId = nodeId;
    this.imgUrl = imgUrl;
  }
 
  ImgPicker.prototype.display = function() {
     document.writeln("<div id='" + this.nodeId + "' style='padding:10px; border:0px;'>"); 
     document.writeln("<img id='" + this.nodeId + "_img' src='" + this.imgUrl + "' alt='" + this.imgUrl + "' onMouseOver='" + this.varName + ".OnMouseOver()' onMouseOut='" + this.varName + ".OnMouseOut()' onClick='" + this.varName + ".OnClick()'>");
     document.writeln("</div>");
  }
 
  ImgPicker.prototype.OnMouseOver = function() {
    if (!this.selected) {
      document.getElementById(this.nodeId).setAttribute("style", "padding:9px; border:1px solid;");
    }
  }
 
  ImgPicker.prototype.OnMouseOut = function() {
    if (!this.selected) {
      document.getElementById(this.nodeId).setAttribute("style", "padding:10px; border:0px;");
    }
  }
 
  ImgPicker.prototype.OnClick = function() {
    if (this.selected) {
      document.getElementById(this.nodeId).setAttribute("style", "padding:10px; border:0px;");
      this.selected = false;
    }else{
      document.getElementById(this.nodeId).setAttribute("style", "padding:9px; border:1px solid pink;");
      this.selected = true;
    }
  }
 
</script>
<body>
<script type="text/javascript">
 
  obj1 = new ImgPicker('obj1', 'ImgPicker1', 'img.jpg'); 
  obj1.display();
 
  obj2 = new ImgPicker('obj2', 'ImgPicker2', 'img.jpg');
  obj2.display();
 
  obj3 = new ImgPicker('obj3', 'ImgPicker3', 'img.jpg');
  obj3.display();
 
  obj4 = new ImgPicker('obj4', 'ImgPicker4', 'img.jpg');
  obj4.display();
 
  obj5 = new ImgPicker('obj5', 'ImgPicker5', 'img.jpg');
  obj5.display();
 
</script>  
</body>
</html>

Code:

1
2
3
4
5
6
function ImgPicker(nodeId, imgUrl) {
    this.varName = nodeId;
    this.selected = false;
    this.nodeId = nodeId;
    this.imgUrl = imgUrl;
  }

par exemple puisqu'un id doit être unique .... :)

le problème après, dans le deuxième writeln de la méthode display(), c'est que les events du tag <img> appellent des fonctions javascript de l'objet dans lequel je suis. En l'occurrence, je devrai appeler obj1.onMouseOver() et rien d'autre. Avec ta solution, ca appellerait ImgPicker1.onMouseOver()..

on s'en fiche du nom de l'objet , il n'est la que pour utiliser un nom de variable contenant les propriétés/méthode d'un objet ... tu peux donc mettre n'importe quoi ( sauf mot clef )

dans ce cas, c'est justement déterminant, puisque j'ai plusieurs occurrences du même objet ! obj1.onMouseOver() != obj2.onMouseOver() et c'est justement de cette distinction donc j'ai besoin quand je fais un display().

non tu as plusieurs objet du même type nuance :)