inserting a new image in a page

[neuneudr]

Hi all,

I've been trying JavaScript a little bit. I beginned by changing
an image using a very simple:

document.getElementById(...).src="new image"

Which worked fine.

However this does not work if Firefox is configured with
the "Change images" disabled... Fair enough.

Now I'd like to try something else: not "changing" an image
but inserting a new image, in a page that had no image
previously.

I'd like to do this because the image isn't ready yet when
the user arrives on the page: I want the page to already
render the text, then "insert" an image once the server
is done creating it.

For example, when the user arrives on the page, he sees
the following text:

"Please wait while the server is preparing the data
you want to visualize"

And then after a few seconds the image appears (the
script checks data on the server every second using
XmlHttp requests and once the server warns that he's
ready, I modify the src of an 1x1 image).

As I already said, it works if I change the src of an
image already present on the page (like a 1x1 white
pixel on a white background) but now I'd like
to know if it's possible to insert a whole new image
in a page that had none previously.

Note that I'm not necessarly looking for something that
works even when Firefox's "Change images" is disabled
but simply as to how to insert a new image in a page
instead of changing a 1x1 white pixel.

Thanks in advance,

Driss

 

[Randy Webb]

(e-mail address removed) said the following on 3/29/2006 8:59 AM:

Hi all,

I've been trying JavaScript a little bit. I beginned by changing
an image using a very simple:

document.getElementById(...).src="new image"

Which worked fine.

However this does not work if Firefox is configured with
the "Change images" disabled... Fair enough.

Now I'd like to try something else: not "changing" an image
but inserting a new image, in a page that had no image
previously.

Search the archives for createElement and appendChild:

<script type="text/javascript">
function addImage(URL,divToUse){
oImage = document.createElement('img');
oImage.src=URL;
document.getElementById(divToUse).appendChild(oImage);
}
</script>

And then call it as such:

addImage('someImage.jpg','containerToAddItTo');

 

[neuneudr]

(e-mail address removed) said the following on 3/29/2006 8:59 AM:

Search the archives for createElement and appendChild:
...

Thanks a lot for the near-instantaneous answer

It worked perfectly.

And when Firefox's "Change images" is disabled it looks like it's
not possible to "insert" a new image and have it displayed
(I was more or less expecting this).