Unsetting an IMG height/width

C

Csaba Gabor

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
 
M

Martin Honnen

Csaba said:
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.
Click to expand...

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);
}
 
R

Randy Webb

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

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

I get the same order of alerts in IE6 and Firefox 1.0.4
An unrelated question is: where is the document's onload function
living in Firefox? The code above (see the 'typeof') finds it for IE.
Click to expand...

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.
 
C

Csaba Gabor

Martin said:
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.
Click to expand...

<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').parentNode.innerHTML);
// document.body.appendChild(outImg);
newImg.parentNode.parentNode.insertBefore(outImg, newImg.parentNode);
alert(document.getElementById('normallyTiny').parentNode.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
 
C

Csaba Gabor

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
 
C

Csaba Gabor

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

In the window object (where it should be). That is why you see code such as:
window.onload = someFunction;
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<img> width height 10
Only one table shows up with the information 2
Image not changing between "mute" & "un-mute" images. 5
How to stop an animated image from sticking to top of page? 2
getting computed style for Img width and height 2
Reading width and height of dynamically loaded image 7
How do I fix this issue in sqaurespace code block? 1
find image width and height 2

Members online

Total: 91 (members: 1, guests: 90)
Robots: 279

Forum statistics

Threads
473,995
Messages
2,570,235
Members
46,821
Latest member
AleidaSchi

Latest Threads

Top