/    Sign up×
Community /Pin to ProfileBookmark

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

to post a comment
JavaScript

25 Comments(s)

Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — It appears as if you're mixing up VBScript with JavaScript. Do something like this:&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
var foo = new Image();
foo.src = 'bar.png';
foo.onload = function() { alert(foo.width + 'x' + foo.height);
//]]&gt;
&lt;/script&gt;
Copy linkTweet thisAlerts:
@Paul_JrFeb 23.2004 — 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.

[color=red][b]Edit: [/b][/color]Beat me to it Fred, but I knew that was VBScript! ?

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.)
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — 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.
Copy linkTweet thisAlerts:
@Paul_JrFeb 23.2004 — 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. ?
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — [i]Originally posted by Paul Jr [/i]

[B]But I have a question, why single quotes?[/B][/QUOTE]
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.
Copy linkTweet thisAlerts:
@Paul_JrFeb 23.2004 — [i]Originally posted by fredmv [/i]

[B]Because double quotes require you to press the Shift key, and thus single quotes are generally easier to type.[/B][/QUOTE]

Ah, so there's no specific coding reason -- just ease of typing.
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — [i]Originally posted by Paul Jr [/i]

[B]Ah, so there's no specific coding reason -- just ease of typing. [/B][/QUOTE]
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.[i]Originally posted by weee[/i]

[B]all the double quotes shoud be single quotes?[/B][/QUOTE]
Nope; as noted above, it's just my syntax style. Did you try my example yet?
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — I want to get the Width and Height into the IMG SRC in the HTML page.

<img width="???" height="???" src="photo.jpg">

How to?
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — &lt;script type="text/javascript"&gt;
//&lt;![CDATA[
onload = function()
{
var i = document.getElementById('img');
alert(i.width + 'x' + i.height);
}
//]]&gt;
&lt;/script&gt;
&lt;img src="foo.png" id="img" alt="" /&gt;
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — I don't know how use it.
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — Just try the example I provided and change [font=courier]foo.png[/font] to the image's dimensions in which you want to check. Sorry if I didn't make it obvious enough.
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — 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
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — [i]Originally posted by weee [/i]

[B]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.[/B][/QUOTE]
If you wish to set the attributes, as opposed to reading them, it's basically the same exact syntax:&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
onload = function()
{
var i = document.getElementById('img');
i.width = "100"
i.height = "100";
}
//]]&gt;
&lt;/script&gt;
It might be better to use [font=courier]setAttribute[/font], but IE can be rather quirky with that sometimes hence why I'm using the raw attribute names.[i]Originally posted by weee [/i]

[B]What's the alt="" / is for?[/B][/QUOTE]

The first part, [font=courier]alt[/font], defines the [i]alt[/i]ernate 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.[i]Originally posted by weee [/i]

[B]Thanks a lot - you have a lot of patiance[/B][/QUOTE]
You'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.
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — <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!
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — [i]Originally posted by weee [/i]

[B]I hope people not judging you by your rudeness or other stuff, that's pathetic.[/B][/QUOTE]
I agree. I'm sorry if I've ever came off as rude &#8212; 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:&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
onload = function()
{
[color=blue]// First, get a reference to the image element.[/color]
var foo = document.getElementById('a'),

<i> </i> [color=blue]// Get a reference to the other image element.[/color]
<i> </i> bar = document.getElementById('b');

<i> </i> [color=blue]// Simply set the dimensions of bar's to foo's.[/color]
<i> </i> bar.width = foo.width;
<i> </i> bar.height = foo.height;
<i> </i>}
//]]&gt;
&lt;/script&gt;
&lt;img src="foo.png" id="a" alt="" /&gt;
&lt;img src="bar.png" id="b" alt="" /&gt;
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — 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?
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — 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... ?
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — Set the dimensions of the image from the script. ?
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — Alright then. This should be what you're looking for:&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
onload = function()
{
with(document.images[0])
{
height = "100";
width = "100";
}
}
//]]&gt;
&lt;/script&gt;
&lt;img src="foo.png" alt="" /&gt;Simply toggle the dimensions to what you want and, of course, the filename of the image in which you want to be displayed.
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — 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.
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — Sorry for the confusion. Here you go:&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
onload = function()
{
with(document.images[0])
{
height = height;
width = width;
}
}
//]]&gt;
&lt;/script&gt;
&lt;img src="foo.png" alt="" /&gt;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 [font=courier]id[/font] attribute to it a reference it via [font=courier]document.getElementById[/font] as shown previously.
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — you are da man!

Thanks a lot and good night man.?
Copy linkTweet thisAlerts:
@weeeauthorFeb 23.2004 — what's that for?

//<![CDATA[
Copy linkTweet thisAlerts:
@fredmvFeb 23.2004 — No problem; glad that helped you out. ?

As for your question, [url=http://forums.webdeveloper.com/showthread.php?s=&threadid=28037]this thread[/url] should answer it.
×

Success!

Help @weee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...