PDA

View Full Version : Getting H and W



Nile
01-27-2008, 08:04 PM
Hey.
I wanted to know how you could get a height and width of an image with JS, I know how to do it with PHP tho, so any help appreciated!
:)

Twey
01-27-2008, 08:09 PM
var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {
this.height; // for the height
this.width; // for the width
};

Nile
01-27-2008, 09:20 PM
Could you explain what this does:

var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {

jackbenimble4
01-27-2008, 10:15 PM
Could you explain what this does:

var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {

The first line creates a new image element pointed to by the variable m. This image element is just like any other image element that's on a webpage, except this image isn't included in the document yet and it is a completely generic image element. At it's current state, there is no image file associated with the element. It'd be the equivalent of creating writing an image without any src attribute, like:


<img />


The second line sets the src property to the image you want to check the width of or height of. You would replace '/blah/foo.png' with the path to the image you want to use.

The third line sets the 'onLoad' 'event handler' of the image to the function within the brackets. This tells the browser that once the image is loaded to execute that function. You wouldn't want to get the width and height before the image was loaded.



Also, if you wanted to find the width and height of an image already within the document, you can do that too. The simplest way would be to set an id for the image element, and use the document.getElementById() function to get the image. Here's an example:



var img = document.getElementById("myImage");
var h = img.height;
var w = img.width;

Your image would look like:


<img src="foo/bar.png" id="myImage" />

Nile
01-27-2008, 10:19 PM
With this code:


<script type="text/javascript">
var m = new Image();
m.src = "test.jpg";
m.onload = function() {
this.height; // for the height
this.width; // for the width
};
document.write(m);
</script>


I get this:

[object HTMLImageElement]

Master_script_maker
01-27-2008, 11:26 PM
the image() function is used to preload an image, and still has to be declared in the body.

Nile
01-27-2008, 11:32 PM
So I should put it in the body?

Master_script_maker
01-27-2008, 11:53 PM
sorry, i wasn't clear. the image still has to be declared in the body
if you want to get an images height i think you should just use:
var img = document.getElementById("imageid");
var h = img.height;
var w = img.width;

Nile
01-28-2008, 12:05 AM
I just wanna know why this script isn't workiing?:

<script type="text/javascript">
var m = new Image();
m.src = "test.jpg";
m.onload = function() {
this.height; // for the height
this.width; // for the width
};
document.write(m);
</script>

Master_script_maker
01-28-2008, 12:50 AM
it doesn't work the way you intended because you can't write an image element that way. to add it to the document you would do this(replaces the span with an image):

<span id="image_1"></span>


<script type="text/javascript">
var m = new Image();
m.src = "image_1.jpg";
m.onload = function() {
var h=this.height; // for the height
var w=this.width; // for the width
};
var span=document.getElementById("image_1");
var body=document.getElementsByTagName("body");
body[0].insertBefore(m, span);
body[0].removeChild(span);

</script>

Nile
01-28-2008, 12:55 AM
Ok now I got this:

<body>
<span id="image_1"></span>

<script type="text/javascript">
var m = new Image();
m.src = "http://www.dynamicdrive.com/forums/designfiles/logo.gif";
m.onload = function() {
var h=this.height; // for the height
var w=this.width; // for the width
};
var span=document.getElementById("image_1");
var body=document.getElementsByTagName("body");
body[0].replaceChild(m,span);
</script>

</body>


And all it shows is the picture.

Master_script_maker
01-28-2008, 12:59 AM
if you want it to show the width or height just document.write the variable h or w

Nile
01-28-2008, 01:05 AM
I either don't get what your saying(cas Im a n00b at js) or you don't get what Im saying..
I want to insert a image in 1 varrible, then get the width and height of that image then write it to the document.

Master_script_maker
01-28-2008, 01:14 AM
sorry, i thought you wanted something different. if you only want to write the height and width:

var m = new Image();
m.src = "http://www.dynamicdrive.com/forums/designfiles/logo.gif";
m.onload = function() {
document.write("Height: "+this.height+". Width: "+this.width); // write the height and width
};

Nile
01-28-2008, 01:18 AM
Thanks+
EDIT:
How would I get it to not get the width and everyhting onload can I like make it so when I call a varrible it'll show?

Twey
01-28-2008, 06:54 AM
I get this:Of course you do. What did you expect to get?
sorry, i wasn't clear. the image still has to be declared in the bodyUntrue.
if you want it to show the width or height just document.write the variable h or wBad advice: the onload event may not fire until after the DOM is loaded, in which case it will wipe the page clean. Use DOM methods.
How would I get it to not get the width and everyhting onload can I like make it so when I call a varrible it'll show?You can't get the width and height before the image has loaded. Think about it. :)