Click to See Complete Forum and Search --> : Image Width and Height...
I'm trying to figure out the width and height of an image before it gets uploaded to the browser. here's the code:
<script language="JavaScript">
function pici()
{
var imgPicture = new Image();
var shade = document.getElementById("shade");
imgPicture.src = shade.src
imgWidth = imgPicture.width
imgHeight = imgPicture.height
dim dd = "<img width=\"" + imgWidth + "\" src=\"shade.jpg\">";
}
</script>
</head>
<body Onload="pici()">
<script language="javascript">
document.write dd
</script>
I can't get it work, I'm not sure where is the mistake here.
why is that?
Thanks a lot
fredmv
02-22-2004, 11:52 PM
It appears as if you're mixing up VBScript with JavaScript. Do something like this:<script type="text/javascript">
//<![CDATA[
var foo = new Image();
foo.src = 'bar.png';
foo.onload = function() { alert(foo.width + 'x' + foo.height);
//]]>
</script>
Paul Jr
02-22-2004, 11:53 PM
One thing that jumps out at me is that you seem to be mixing JS with VBScript -- I think. I've never worked with VBScript and I've only seen parts of it once or twice, but you seem to be mixing the two.
Edit: Beat me to it Fred, but I knew that was VBScript! :D
But I have a question, why single quotes? I usually use double quotes all the time unless it's quotes inside quotes, then it's single inside double, but I usually use double. (Exception is when writing HTML to the page, I usually use single quotes so I can use double for the HTML attributes. ect., ect.)
My Mistake, here's the right one:
<script language="JavaScript">
function pici()
{
var imgPicture = new Image();
var shade = document.getElementById("shade");
imgPicture.src = shade.src
imgWidth = imgPicture.width
imgHeight = imgPicture.height
var dd = "<img width=\"" + imgWidth + "\" src=\"shade.jpg\">";
}
</script>
</head>
<body Onload="pici()">
<script language="javascript">
document.write dd
</script>
It's still doesn't work.
AllI wanna do is to get the width and height and then get into the IMG SRC tag of the image.
Paul Jr
02-22-2004, 11:58 PM
I think it's because you're trying to get the ID of an element that doesn't exist yet -- the image's ID. Since the script runs before the page loads, you're trying to access an ID that hasn't been created for an element that doesn't exist because 1) The page hasn't loaded so the image hasn't been created, and 2) The image won't exist anyway because you haven't written it out. You're trying to get the ID, but that doesn't create the image. Try Fredmv's example. ;)
fredmv
02-22-2004, 11:58 PM
Originally posted by Paul Jr
But I have a question, why single quotes?Because double quotes require you to press the Shift key, and thus single quotes are generally easier to type.
As for the original poster, check the example I provided and adjust your piece of code to work similar to it.
Paul Jr
02-23-2004, 12:00 AM
Originally posted by fredmv
Because double quotes require you to press the Shift key, and thus single quotes are generally easier to type.
Ah, so there's no specific coding reason -- just ease of typing.
fredmv
02-23-2004, 12:03 AM
Originally posted by Paul Jr
Ah, so there's no specific coding reason -- just ease of typing. Completely correct. What it really comes down to is just my syntax style; everyone has a different preference of how they like to write things.Originally posted by weee
all the double quotes shoud be single quotes?Nope; as noted above, it's just my syntax style. Did you try my example yet?
I want to get the Width and Height into the IMG SRC in the HTML page.
<img width="???" height="???" src="photo.jpg">
How to?
fredmv
02-23-2004, 12:10 AM
<script type="text/javascript">
//<![CDATA[
onload = function()
{
var i = document.getElementById('img');
alert(i.width + 'x' + i.height);
}
//]]>
</script><img src="foo.png" id="img" alt="" />
fredmv
02-23-2004, 12:14 AM
Just try the example I provided and change foo.png to the image's dimensions in which you want to check. Sorry if I didn't make it obvious enough.
I'm new to the whole thing.
It's working but I still don't know how to get the width and height of the image (which we got throught the JS) into the IMG SRC HTML code.
P.S.
What's the alt="" / is for?
Thanks a lot - you have a lot of patiance
fredmv
02-23-2004, 12:28 AM
Originally posted by weee
It's working but I still don't know how to get the width and height of the image (which we got throught the JS) into the IMG SRC HTML code.If you wish to set the attributes, as opposed to reading them, it's basically the same exact syntax:<script type="text/javascript">
//<![CDATA[
onload = function()
{
var i = document.getElementById('img');
i.width = "100"
i.height = "100";
}
//]]>
</script>It might be better to use setAttribute, but IE can be rather quirky with that sometimes hence why I'm using the raw attribute names.Originally posted by weee
What's the alt="" / is for?
The first part, alt, defines the alternate content for the image in the case that the browser doesn't support images or the image can't be rendered for some reason. The trailing slash assumes you're using XHTML and closes the element since all elements, including empty ones (i.e., ones that do not have a matching closing tag) must be closed in order to be considered valid.Originally posted by weee
Thanks a lot - you have a lot of patianceYou're very welcome. Sorry if some of my posts seem rude or otherwise blunt; I sometimes need to remember I'm working with people in which are new to this Web stuff and that's why I try to be detailed in my examples and explinations.
<html>
<head>
<script type="text/javascript">
//<![CDATA[
onload = function()
{
var i = document.getElementById('img');
alert(i.width + 'x' + i.height);
}
//]]>
</script>
</head>
<body>
<img src="shade.jpg" id="dimg">
</body>
</html>
I want that tag to be like that:
<img src="shade.jpg" width="the width from the JS varibles" height="the height from the JS varibles" id="img">
Can it happen?
Thanks for the ALT explanation.
I hope people not judging you by your rudeness or other stuff, that's pathetic.
you are very helpfull and I appriciate it a lot!
fredmv
02-23-2004, 12:39 AM
Originally posted by weee
I hope people not judging you by your rudeness or other stuff, that's pathetic.I agree. I'm sorry if I've ever came off as rude — I don't intend to be, rather, I enjoy helping people. It's just you can't really tell how I'm saying things or my tone of voice or otherwise through text so that may be part of the reason I come off as rude sometimes, which I like not to think.
As for your question, it's completely possible. It's done like this:<script type="text/javascript">
//<![CDATA[
onload = function()
{
// First, get a reference to the image element.
var foo = document.getElementById('a'),
// Get a reference to the other image element.
bar = document.getElementById('b');
// Simply set the dimensions of bar's to foo's.
bar.width = foo.width;
bar.height = foo.height;
}
//]]>
</script><img src="foo.png" id="a" alt="" />
<img src="bar.png" id="b" alt="" />
No problem at all. I don;t feel any rudness or something else at all. I understand that I can't reallt tell the tone of your voice.
I'm not sure if I explaind myself right.
I have only one image in the page not too. and I want to plant the Width and Height that I got automaticley from the script into the IMG SRC TAG.
<img src="test.jpg" id="img" width="???" height="????>
Got it?
fredmv
02-23-2004, 12:48 AM
I think I understand what you're after now. You want to set the dimensions of the image from the script? Or do you want the dimensions to be based off of another image on the page? Just trying to clarify here... :D
Set the dimensions of the image from the script. :)
fredmv
02-23-2004, 12:53 AM
Alright then. This should be what you're looking for:<script type="text/javascript">
//<![CDATA[
onload = function()
{
with(document.images[0])
{
height = "100";
width = "100";
}
}
//]]>
</script><img src="foo.png" alt="" />Simply toggle the dimensions to what you want and, of course, the filename of the image in which you want to be displayed.
The thing is that I don't want to set the width and height as 100 or something else I want set'em as the width and height of the image itself.
If the image is 200 X 200 that what I want the height and width and the JS to be.
fredmv
02-23-2004, 01:10 AM
Sorry for the confusion. Here you go:<script type="text/javascript">
//<![CDATA[
onload = function()
{
with(document.images[0])
{
height = height;
width = width;
}
}
//]]>
</script><img src="foo.png" alt="" />Of course, this only applies to the first image in the document; if it's somewhere else, you could find its index in the document or, preferably, use assign an id attribute to it a reference it via document.getElementById as shown previously.
you are da man!
Thanks a lot and good night man.:)
what's that for?
//<![CDATA[
fredmv
02-23-2004, 01:35 AM
No problem; glad that helped you out. ;)
As for your question, this thread (http://forums.webdeveloper.com/showthread.php?s=&threadid=28037) should answer it.