Results 1 to 4 of 4

Thread: Width, Height is read only for Image Object???

  1. #1
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Width, Height is read only for Image Object???

    Hi there,

    I just googling about reference of Javascript Image object and found the following site as the first result.

    http://www.comptechdoc.org/independe...javaimage.html

    It says that height and width is read only. Isn't that a mistake? I think I have seen couple of other sites that mentioned those two properties as read only value.

    I was able to do the following and change the height and width value, which worked perfectly fine.

    HTML Code:
           var myImg = new Image() ;
    	myImg.src = "http://www.cortland.edu/flteach/mm-course/forms1.jpg" ;
    	alert(myImg.height) ; alert(myImg.width) ;
    	myImg.height = 500 ;
    	myImg.width =  600 ;
    	
    	document.getElementById('imageTest').appendChild(myImg) ;
    ______________________
    Regards

    Pman
    http://www.pmansLab.com

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    I don't know, but if it is, then it's the browser doing the handy work for you. I personally like the use of styles:

    Example:
    img.style.width = "5px";

    don't forget to put in your units (px, in, cm, em, etc.)!

  3. #3
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    It might reflect the fact that img.width and img.height are depreceated.

    Use

    img.style.width instead.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In javascript, an image's dimensions are read only. An image tag's dimensions are another matter. The confusion arises due to the unconventional way you have chosen to create an image tag:

    Code:
           var myImg = new Image() ;
    	myImg.src = "http://www.cortland.edu/flteach/mm-course/forms1.jpg" ;
    	myImg.height = 500 ;
    	myImg.width =  600 ;
    	
    	document.getElementById('imageTest').appendChild(myImg) ;
    This would more accurately be expressed:

    Code:
           var myImg = document.createElement('img') ;
    	myImg.src = "http://www.cortland.edu/flteach/mm-course/forms1.jpg" ;
    	myImg.height = 500 ;
    	myImg.width =  600 ;
    	
    	document.getElementById('imageTest').appendChild(myImg) ;
    The browser will not know the dimensions of the actual image file until they have been loaded. Regardless of this information, the browser will accept your dimensions (in most cases), scaling the presentation of the image to them. However, the size of the image file itself remains unchanged - hence read only.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •