[POO] identifiant d'une variable

**m_biaggi** · 15/10/2008, 15h38

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

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 :

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
 
<!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>

**le_chomeur** · 15/10/2008, 15h59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ....

**m_biaggi** · 15/10/2008, 16h12

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()..

**le_chomeur** · 15/10/2008, 16h55

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 )

**m_biaggi** · 16/10/2008, 09h11

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().

**le_chomeur** · 16/10/2008, 09h30

non tu as plusieurs objet du même type nuance

[POO] identifiant d'une variable

JavaScript

Discussions similaires

Partager

Partager