Menu
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
<script type="text/javascript">
//<![CDATA[
var foo = new Image();
foo.src = 'bar.png';
foo.onload = function() { alert(foo.width + 'x' + foo.height);
//]]>
</script>
[i]Originally posted by Paul Jr [/i]Because double quotes require you to press the Shift key, and thus single quotes are generally easier to type.
[B]But I have a question, why single quotes?[/B][/QUOTE]
[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]
[i]Originally posted by Paul Jr [/i]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.
[B]Ah, so there's no specific coding reason -- just ease of typing. [/B][/QUOTE]
[i]Originally posted by weee[/i]Nope; as noted above, it's just my syntax style. Did you try my example yet?
[B]all the double quotes shoud be single quotes?[/B][/QUOTE]
<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="" />
[i]Originally posted by weee [/i]If you wish to set the attributes, as opposed to reading them, it's basically the same exact syntax:
[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]
<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 [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]
[i]Originally posted by weee [/i]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.
[B]Thanks a lot - you have a lot of patiance[/B][/QUOTE]
[i]Originally posted by weee [/i]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.
[B]I hope people not judging you by your rudeness or other stuff, that's pathetic.[/B][/QUOTE]
<script type="text/javascript">
//<![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>}
//]]>
</script>
<img src="foo.png" id="a" alt="" />
<img src="bar.png" id="b" alt="" />
<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.<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 [font=courier]id[/font] attribute to it a reference it via [font=courier]document.getElementById[/font] as shown previously.0.1.9 — BETA 5.13