Prototype sur image ?

**SpaceFrog** · 15/02/2007, 17h20

C'est possible ou pas ?
Je n'y arrive pas ...

**SpaceFrog** · 15/02/2007, 17h32

En fait voilà ce que j'essaye de passer en prototype d'une image :

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
 
<script type='text/javascript'>
 
var H=true
var W=false
 
function GetImageSize(path,D){
	var GhostImage=new Image()
	GhostImage.src=path
	var TH=GhostImage.height
	var TW=GhostImage.width
	GhostImage=null
	return D?TH:TW;}
 
</script>

**Auteur** · 15/02/2007, 18h17

bonjour,

là je ne comprends pas ton script

Il y a un lien avec cette discussion ?

C'est surtout ton paramètre D qui m'intrigue et tes variables H et W qui sont à false.

**mikemarti** · 15/02/2007, 20h31

D doit être un booléen (soit H soit W)
et donc la fonction retourne soit la longueur soit la largeur...
C'est quoi le problème en fait ?

**Auteur** · 15/02/2007, 23h56

D'abord je suis tombé sur cet article :
http://developer.mozilla.org/fr/docs...%A0_JavaScript

Et à partir de là j'ai fait deux scripts :

-Sur celui-ci j'ai fait un prototype sur String (c'est un exemple de l'article que j'ai légèrement modifié) : ça marche avec IE (en fait avec ma vieille version 5 d'IE

) et Firefox.

Code html :

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>
<title></title>
<script type='text/javascript'>
<!--
 String.prototype.inverse = function() 
 {
    var r = "", i;
    for (i = this.length - 1; i >= 0; i--) {
        r += this.charAt(i);
    }
    return r;
}
function testString()
{
 var s = document.getElementById("idSpan").innerHTML;
 alert(s.inverse())
}
 
//-->
</script>
 
</head>
 
<body onload="testString()">
 
<span id="idSpan">SpaceFrog</span>
 
</body>
 
</html>

-Sur celui-ci je l'ai fait avec l'objet Image(). IE5 renvoi un message d'erreur (la méthode n'est pas gérée par l'objet), mais il fonctionne avec Firefox :

Code html :

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
 
<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
Image.prototype.getImageSize = function()
  {
        var GhostImage = new Image();
        GhostImage.src = this.src;
        var TH =  GhostImage.height;
        var TW = GhostImage.width;
        GhostImage = null;
        return TH+" "+TW;
  }
 
function testImage()
{
  var elmt = document.getElementById("idImg");
 
  alert(elmt.getImageSize());
}
 
//-->
</script>
 
</head>
 
<body onload="testImage()">
 
<img id="idImg" style="width:50px" src="DSC00582B.JPG" />
 
</body>
 
</html>

Chose intéressante : lorsque l'image n'existe pas H et W renvoient 0.

**SpaceFrog** · 19/02/2007, 08h49

On ne pourrait donc pas sous IE coler un prototype sur une image ??

**Auteur** · 19/02/2007, 10h23

Envoyé par SpaceFrog

On ne pourrait donc pas sous IE coler un prototype sur une image ??

Euh, ça ne marche pas non plus avec des versions plus récentes d'IE (6 et 7) ?

**Auteur** · 19/02/2007, 15h05

J'ignore si ça joue mais image est un objet de document contrairement à String() qui est un objet javascript. Avec une autre syntaxe peut-être

**SpaceFrog** · 19/02/2007, 15h07

je vais essayer de passer par object ... ???

**SpaceFrog** · 19/02/2007, 15h15

Bon ben ça marche avec object ...

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
<script type='text/javascript'>
 
var H=true
var W=false
 
function GetImageSize(Obj,D){
   if(Obj.nodeName=="IMG"){
	var GhostImage=new Image()
	GhostImage.src=Obj.src
	var TH=GhostImage.height
	var TW=GhostImage.width
	GhostImage=null
	return D?TH:TW;}
	}
 
 
Object.prototype.TrueSize=function (){GetImageSize(Pic,Ortho)}
 
</script>
 
</head>
 
<body>
<img src="lungs.gif" onclick="alert(GetImageSize(this,H))" />
</body>

**Auteur** · 19/02/2007, 15h31

je dois avouer ne pas comprendre l'intéret de passer par object

Une "simple" fonction ne suffisait pas (cf.ton premier message) ?

**SpaceFrog** · 19/02/2007, 16h05

Le but ici est de coller un prototype sur une image ...
Et comme IE n'accepte pas un proto sur une image je colle le proto sur un objet et je teste si c'est une image ...

Desavantage le proto est du coup affecté à tous les objets et du coup si on a une boucle for in on retrouvera le proto dans tous les objets ...

**SpaceFrog** · 19/02/2007, 17h03

Oulà shame on me !!!

je l'utilise pas là le prototype ...
et on dirait bien que sue Object non plus on ne puisse pas affecter un prototype ?

**Auteur** · 19/02/2007, 18h28

j'ai fait un truc, qui ne me donne pas une entière satisfaction :

Code html :

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
68
69
70
71
72
73
74
 
<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
var myImage = function(idImage)
{
   this.image = document.getElementById(idImage);
 
   if (this.image.tagName.toLowerCase()=="img")
   {
     if (this.image.readyState!=null) //pour IE
     {
       if (this.image.readyState.toLowerCase()!="complete")
          this.image = null;
     }
   }
   else
       this.image = null;
}
 
myImage.prototype =
{
  getImageSize : function(D)
  {
     var GhostImage = new Image();
     var TH, TW;
     TH = 0; TW = 0;
     if (this.image!=null)
     {
       GhostImage.src = this.image.src;
       TH =  GhostImage.height;
       TW = GhostImage.width;
       GhostImage = null;
     }
     return (D)?("H= "+TH):("W= "+TW);
  }
  ,
  getImage : function()
  {
     return this.image;
  }
  ,
  isImage : function()
  {
     return (this.image.tagName.toLowerCase()=="img")?true:false;
  }
}
 
function testImage()
{
  var Img1 = new myImage("idImg");
  var Img2  = Img1.getImage();
 
  alert(Img1.isImage());
 
  alert("Taille réelle : "+Img1.getImageSize(false));
 
  alert("Taille à l'écran : H= "+Img2.height+" W="+Img2.width);
}
 
//-->
</script>
 
</head>
 
<body onload="testImage()">
 
<img id="idImg" style="width:150px" src="i5.gif" />
 
</body>
 
</html>

J'ai créé un objet myImage qui prend comme paramètre l'id de l'image choisie. Dans le constructeur, je teste la balise de l'objet (je vérifie que c'est une balise img).

Le readyState c'est pour IE : c'est pour véifier que l'image est chargée, sinon TH et TW renvoient n'importe quoi (contrairement à FF qui retourne 0,0 si l'image n'est pas chargée).

Puis je crée le prototype :
j'ai supprimé le paramètre path de la fonction getSizeImage car cette donnée est contenue dans this.image.

myImage ne renvoie l'objet image originale uniquement avec la méthode getImage()

ce qui me permet d'obtenir les autres propriétés.

On pourrait dire que j'ai créé un objet parent (myImage) à l'objet Image().