SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image prototype and IE :(

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

    Any suggestions ?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you referring to HTMLImageElement?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am referring to a:
    Code:
    <img src="mypic.gif" />
    element ...

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I'm not sure what you're asking. Could you show us the code that works in FF but not in IE?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ..

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SpaceFrog, I don't mean to give you a hard time, but your code still doesn't seem to work right.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this latest version you're using the global function again.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •