getting image size when loading gif in page?

[abrtlt]

I am using Ajax with a PHP script to obtain the name of gif files from
a MySQL database. Javascript then embeds the actual file in the web
page, thus displaying the image on the fly. For precise positioning, I
would like to know the gif image size. Is there a way to obtain it
using Javascript or otherwise?
(I know the size is indeed contained in the gif format, as I can see it
with a binary editor...)
Thanks!

Andrew

 

[Martin Honnen]

I am using Ajax with a PHP script to obtain the name of gif files from
a MySQL database. Javascript then embeds the actual file in the web
page, thus displaying the image on the fly. For precise positioning, I
would like to know the gif image size. Is there a way to obtain it
using Javascript or otherwise?

PHP should be able to read out the image size directly on the server.
Client-side JavaScript can give you the pixel size once the image has
been completely loaded e.g.
var img = new Image();
img.onload = function () {
alert(this.width + 'x' + this.height);
};
img.src = 'whatever.gif';

 

[ASM]

(e-mail address removed) a écrit :

I am using Ajax with a PHP script to obtain the name of gif files from
a MySQL database. Javascript then embeds the actual file in the web
page, thus displaying the image on the fly. For precise positioning, I
would like to know the gif image size. Is there a way to obtain it
using Javascript or otherwise?

first :
if your styles sheet is well made
you have no use of any placement or size ...

but,
size of image can be obtained via PHP (better) or via JS


In JS simplest way is :
-----------------------

<img src="1.jpg" alt="photo" title="" name="i_1" id="i_1"
onload="alert('width = '+this.width+'\nheight = '+this.height)" />

<a href="#" onclick="document.i_1.src = '2.jpg';">photo 2</a>


Example to know (in image's title) width and height and refresh that
information on each change of images

<script type="text/javascript">
function setImg(id) {
document.getElementById(id).onload=function(){getImage(this)}
}
function getImage(imag) { //
imag.title=imag.width+','+imag.height;
}
onload = function() {
var I = document.images;
for(var i=0; i<I.length; i++) {
I.title=I.width+','+I.height;
setImg(I.id);
}
}
</script>


In PHP it is yet easier :
-------------------------

<?php
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" alt=\"photo\" title=\"$attr />";
?>