Web Hosting Offers
See the new scripts recently added to Dynamic Drive. Click here.
Original, practical CSS codes and examples such as CSS menus for your site.
    Search code samples  
 
  Keyword
 
 
 
   
 
 
  Code Samples
 
ASP
CSS
Dhtml
Html
Javascript
PHP
 
   
     LOGIN HERE  
 
Username
Password
Forgot Password
Verify Signup
 
 
 

Javascript >> Images

How can I find the width/height of an IMG/Image?

Visitor Ratings (0) :

Description
The pixel width/height of an image are readable in NN3+ and IE4+:
document.imageName.width
document.imageName.height
for <IMG NAME=\"imageName\" SRC=\"img1.gif\"> respectively
var img = new Image();
img.src = \'img1.gif\';
...
alert(img.width + \'x\' + img.height);

Note that an image has to be loaded to have the width and height
available so consider using the onload handler e.g.
function showDimensions () {
alert(this.width + \'x\' + this.height);
}
var img = new Image();
img.onload = showDimensions;
img.src = \'img1.gif\';
Note further that in IE4+ and NN6 you can not only read but also set
the width/height of an IMG element.

IE4+ also has a fileSize property for IMG element/Image objects giving the size in bytes. Thus
var img = document[\'imageName\'];
if (img.fileSize)
alert(img.fileSize)
will show the file size if the property exists.

In NN7 (6?) / Mozilla you can get the original width and height of an
image by:

img = document.getElementById(imageid);
alert(img.naturalWidth+\"x\"+img.naturalHeight);

these values may differ from img.width and img.height due to CSS
settings or altering the image size with javascript.
Code
Select All
 Rate this Resource