Unsetting an IMG height/width

#1 July 24th, 2005, 04:05 PM

I have an IMG placeholder for what will normally be a tiny (6x7) img.
Sometimes however, I will use a somewhat larger but still small image.
How can I unset the dimensions for the <IMG id=normallyTiny ...>
element I have already specified, rather than using the tortured code
below? Unfortunately, I must set the dimensions at the outset, because
otherwise the placeholder for the 'normallyTiny' image will be too big.

<BODY onload="docLoaded()">
<IMG id=dummyImg onload="reviseImg()" style="visibility:hidden"
src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/perc1.gif">
<IMG height=6 width=7 id=normallyTiny>

<SCRIPT type='text/javascript'>
function docLoaded() {
alert('document is loaded: ' + typeof(document.body.onload)); }
function reviseImg() {
alert('dummy image is preloaded');
var dummyImg = document.getElementById('dummyImg');
var img = document.getElementById('normallyTiny');
img.width = dummyImg.width;
img.height = dummyImg.height;
img.src = dummyImg.src; }
</SCRIPT>
</BODY>

Trying delete img.width has no effect and trying img.width=0 or "" or
null merely cause the subsequent image to not show.

Note that the order of the alerts differs between IE6 and FF Deer Park
Alpha.

An unrelated question is: where is the document's onload function
living in Firefox? The code above (see the 'typeof') finds it for IE.

Thanks,
Csaba Gabor from Vienna

#2 July 24th, 2005, 04:35 PM

Csaba Gabor wrote:
[color=blue]
> I have an IMG placeholder for what will normally be a tiny (6x7) img.
> Sometimes however, I will use a somewhat larger but still small image.
> How can I unset the dimensions for the <IMG id=normallyTiny ...>
> element I have already specified, rather than using the tortured code
> below? Unfortunately, I must set the dimensions at the outset, because
> otherwise the placeholder for the 'normallyTiny' image will be too big.[/color]

That is difficult to achieve I think as browsers behave differently, if
you only care about modern browsers then the best approach is to create
a new image element e.g.
var img = document.createElement('img');
// set src as needed
img.src = 'whatever.gif';
and then replace the other image element e.g.
var oldImg = document.getElementById('normallyTiny');
if (oldImg && oldImg.parentNode && oldImg.parentNode.replaceChild) {
oldImg.parentNode.replaceChild(img);
}

--

Martin Honnen
http://JavaScript.FAQTs.com/

#3 July 24th, 2005, 06:55 PM

Csaba Gabor said the following on 7/24/2005 11:52 AM:

<snip>
[color=blue]
> Note that the order of the alerts differs between IE6 and FF Deer Park
> Alpha.[/color]

I get the same order of alerts in IE6 and Firefox 1.0.4
[color=blue]
> An unrelated question is: where is the document's onload function
> living in Firefox? The code above (see the 'typeof') finds it for IE.[/color]

In the window object (where it should be). That is why you see code such as:

window.onload = someFunction;

rather than:
document.onload = someFunction;

Change your typeof test to test for window.onload instead of
document.body.onload and you will see the alert then.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

#4 July 25th, 2005, 06:05 PM

Martin Honnen wrote:[color=blue]
> Csaba Gabor wrote:[color=green]
> > I have an IMG placeholder for what will normally be a tiny (6x7) img.
> > Sometimes however, I will use a somewhat larger but still small image.
> > How can I unset the dimensions for the <IMG id=normallyTiny ...>
> > element I have already specified, rather than using the tortured code[/color]
>
> That is difficult to achieve I think as browsers behave differently, if
> you only care about modern browsers then the best approach is to create
> a new image element e.g.[/color]

<BODY onload="docLoaded()">
<DIV>
<IMG height=6 width=7 id=normallyTiny
src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/perc1.gif">
</DIV>
<SCRIPT type='text/javascript'>
function docLoaded() {
alert('document is preloaded');
var newImg = document.createElement('IMG');
newImg.id="normallyTiny";
newImg.src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/pero1.gif";
var oldImg = document.getElementById('normallyTiny');
var outImg = oldImg.parentNode.replaceChild (newImg, oldImg);
alert(document.getElementById('normallyTiny').pare ntNode.innerHTML);
// document.body.appendChild(outImg);
newImg.parentNode.parentNode.insertBefore(outImg, newImg.parentNode);
alert(document.getElementById('normallyTiny').pare ntNode.innerHTML);
}
</SCRIPT>
</BODY>

Thanks very much Martin. Given that I can't unset the dimensions, your
method is far cleaner than mine.

I'll submit a second more proper example, but this code brings up an
enrelated issue of id's, which are supposed to be unique. I've
deliberately reintroduced the old image to duplicate the ids and see
what the last alert reports. It shows a distinction between the two
browsers: With FF, it always seems to be the most recently inserted Id
that 'wins'. In the case of IE, it seems to be the one occurring first
in document order (swap the line commented out with the one after it to
observe the change). The moral of the story is, it's the user's
responsibility to ensure unique ids.

Csaba Gabor from Vienna

#5 July 25th, 2005, 06:05 PM

This second example illustrates how I would really adapt Martin's
example. The first example was just for the purposes of exploring what
happened when the browser was presented with multiple elements with the
same id. In the example below, I am intending to reuse the one
imported image multiple times, hence the use of .cloneNode

<BODY onload="docLoaded()">
<DIV id=imgDiv>
<IMG height=6 width=7 id=img1
src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/perc1.gif">
<IMG height=6 width=7 id=img2
src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/perc1.gif">
</DIV>
<SCRIPT type='text/javascript'>
function docLoaded() {
var ni, newImg = document.createElement('IMG');
newImg.src="http://us.i1.yimg.com/us.yimg.com/i/us/pim/f/pero1.gif";
var oldImg = document.getElementById('img1');
var parDiv = oldImg.parentNode;
parDiv.replaceChild (ni=newImg.cloneNode(false), oldImg);
ni.id = oldImg.id;
oldImg = document.getElementById('img2');
parDiv.replaceChild (ni=newImg.cloneNode(false), oldImg);
ni.id = oldImg.id;
alert(document.getElementById('imgDiv').innerHTML) ;
}
</SCRIPT>
</BODY>

Csaba Gabor from Vienna

#6 July 25th, 2005, 06:25 PM

Randy Webb wrote:[color=blue]
> Csaba Gabor said the following on 7/24/2005 11:52 AM:[color=green]
> > An unrelated question is: where is the document's onload function
> > living in Firefox? The code above (see the 'typeof') finds it for IE.[/color]
>
> In the window object (where it should be). That is why you see code such as:
> window.onload = someFunction;[/color]

Thanks Randy, that was quite helpful. I was especially pleased that
both my questions were answered.

But perhaps you can expound on that "where it should be" comment.
There is a 1 to 1 correspondence between the window and the
document.body. Given that all the other onloads (for example image
elements) have the .onload sitting on a DOM element, having the onload
for the document (body) sitting on the window object seems strangely
incongruous. I am curious to know the reasoning invoved.

Thanks,
Csaba Gabor from Vienna

DeadOnArrival · #7 May 10th, 2006, 08:31 AM

img.removeAttribute("width");

Unsetting an IMG height/width

Popular Articles

What is Bytes?