By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,491 Members | 1,191 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,491 IT Pros & Developers. It's quick & easy.

getting image size when loading gif in page?

P: n/a
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

Nov 4 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ab****@yahoo.com wrote:
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';

--

Martin Honnen
http://JavaScript.FAQTs.com/
Nov 4 '06 #2

P: n/a
ASM
ab****@yahoo.com 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(){getI mage(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[i].title=I[i].width+','+I[i].height;
setImg(I[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 />";
?>

--
ASM
Nov 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.