image prototype and IE :(

**SpaceFrog** · Feb 19, 2007 01:58

It looks like IE doesn't like prototypes on images ?
It works with FFX

Any suggestions ?

**Kravvitz** · Feb 19, 2007 03:18

Are you referring to HTMLImageElement?

**SpaceFrog** · Feb 19, 2007 04:14

I am referring to a:

Code:

<img src="mypic.gif" />

element ...

**Kravvitz** · Feb 19, 2007 04:22

Hmm... I'm not sure what you're asking. Could you show us the code that works in FF but not in IE?

**SpaceFrog** · Feb 19, 2007 04:28

Code:

<script type='text/javascript'>


function GetImageHeight(path){
	var GhostImage=new Image()
	GhostImage.src=path
	var TH=GhostImage.height
	GhostImage=null
	return TH;}

Image.prototype.TrueHeight=GetImageHeight(Me)

</script>

</head>

<body>
<img src="lungs.gif" onclick="alert(this.TrueHeight(this.path))" />
</body>

**Kravvitz** · Feb 19, 2007 05:28

Ah. Of course. Must have been a brain freeze.

It seems that only Mozilla based browsers support doing that. Opera 9, Safari 2, and IE7 don't support that.

Mozilla based browsers and Opera 8+ support using HTMLImageElement (which is defined by DOM1). Safari 2 and IE7 don't support that though.

**SpaceFrog** · Feb 19, 2007 08:17

OK I worked around it as Objectaccepts a prototype ...

Code:

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




Object.prototype.TrueSize=function (){GetImageSize(Pic,Ortho)}
</script>

</head>

<body>
<img src="lungs.gif" onclick="alert('this picture is '+ GetImageSize(this.src,H)+' px Heigh \n and '+GetImageSize(this.src,W)+' px Wide')" />
</body>

**Kravvitz** · Feb 19, 2007 08:30

But setting a prototype function on Object doesn't work in IE either. And you aren't even using the function that you set via the prototype. You're using the global function.

Adding methods to Object is a bad idea anyway, because if you ever use a for-in loop on anything it will be listed.

**SpaceFrog** · Feb 19, 2007 08:57

I juste realized I skipped a test in above code ...

Code:

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

I tested it in IE and it does work ...
Should I need to use a for in loop I would then add a test

on TrueSize or find a way of differentiating added prototypes ... (I think I already have a script for that)
This is actually the only way I can see to get around this ..

**Kravvitz** · Feb 19, 2007 09:20

SpaceFrog, I don't mean to give you a hard time, but your code still doesn't seem to work right.

**SpaceFrog** · Feb 19, 2007 09:27

arf got my copy paste in a twist ...
try this, I tested it with IE and FFX

Code:

<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('this picture is '+ GetImageSize(this,H)+' px Heigh \n and '+GetImageSize(this,W)+' px Wide')" />
</body>

**Kravvitz** · Feb 19, 2007 09:36

In this latest version you're using the global function again.

**SpaceFrog** · Feb 19, 2007 09:50

talking about frozen ...
My brain is frozen stiff ... Sorry I didn't get what you were telling me ...
I see now I wasn't using the prototype at all...
And when I try ti use it ... it doesn't work

**Kravvitz** · Feb 19, 2007 10:25

It happens.

By the way, the Object.prototype method seems to work in Firefox, Netscape 6.0 - 7.2, other Mozilla browsers, Opera 7+, Safari (tested in 1.2+), and Konqueror 3 (tested in 3.4+). I still don't think it's a good idea to use it though. And besides, it doesn't work in IE anyway.

**SpaceFrog** · Feb 20, 2007 02:03

IE

Just because I am very stubborn and I don't like to be defeated by IE...

Code:

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

Not of any use really but that's for IE !

User Tag List

Thread: image prototype and IE :(

Thread Tools

Display

image prototype and IE :(

Bookmarks

Bookmarks

Posting Permissions