Prototype sur image ?

Version imprimable

15/02/2007, 17h20
SpaceFrog

Prototype sur image ?

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

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

Code:

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>

15/02/2007, 18h17
Auteur

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.
15/02/2007, 20h31
mikemarti

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 ?

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 :oops: ) et Firefox.

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

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.

19/02/2007, 08h49
SpaceFrog

On ne pourrait donc pas sous IE coler un prototype sur une image ?? 8O
19/02/2007, 10h23
Auteur

Citation:

Envoyé par SpaceFrog

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

Euh, ça ne marche pas non plus avec des versions plus récentes d'IE (6 et 7) ?
19/02/2007, 15h05
Auteur

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 :?
19/02/2007, 15h07
SpaceFrog

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

Bon ben ça marche avec object ...

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

19/02/2007, 15h31
Auteur

je dois avouer ne pas comprendre l'intéret de passer par object :oops: Une "simple" fonction ne suffisait pas (cf.ton premier message) ?
19/02/2007, 16h05
SpaceFrog

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 ...
19/02/2007, 17h03
SpaceFrog

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 ?

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

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

01/03/2007, 19h06
Auteur

:resolu: Spacefrog ?
05/03/2007, 08h41
SpaceFrog

heu non pas résolu comme je le souahiterais mais bon on va pas y passer notre vie ;)

Merci Auteur,
je pense que tu as mis le doigt dessus avec l'objet javascript / document ...
05/03/2007, 21h05
Auteur

c'est la seule réponse que je peux t'apporter :( , en plus du dernier script que j'ai posté.