document.write() is replacing image

[Charles Crume]

Hello all;

I have a web page that displays a blank gif for about 2 seconds, then
displays an animated gif image, then, after the animation plays, I want to
display a link so the user can click on it and go to another page. I am
fairly new to javascript and came up with the following code:

-----------------------
<p align="center"><img src="images/nil.gif" align="middle" width="375"
height="300" name="blank_image"></p>
<script language="javascript">
function create_link() {
// document.write('<p align="center"><a href="index2.htm">ENTER</a></p>');
document.write('<p align="center"><a href="index2.htm">ENTER</' +
'a></p>');
}
</script>
<script language="javascript">
ccs_img = new Image(76, 21);
ccs_img.src = "images/ccs_logo_animated_rotate.gif";
setTimeout("document['blank_image'].src = ccs_img.src", 2000);
setTimeout("create_link()", 7100);
</script>
-----------------------

The problem is that when the "create_link" script executes it replaces the
existing image and only the link appears (I would like the link to appear
centered under the image). I've searched google for more info and have been
experimenting with document.write and setTimeout. I am confused by the
results I get. Hopefully someone can explain what's happening and why, or
what I am doing incorrectly.

If I put the following in a page:

<script>
document.write("123");
document.write("456");
</script>

I get: 123456 -- the output from both document.write commands is displayed.
If I put the following in a page:

<script>
document.write("123");
document.write("456");
setTimeout('document.write("ABC")', 1000);
</script>

I get: 123456, then after 1 second this is replaced by ABC -- I would expect
123456ABC
If I put the following in a page:

<script>
setTimeout('document.write("ABC")', 1000);
setTimeout('document.write("456")', 2000);
</script>

I get: ABC and the 456 never appears!!

I am confused!!

As I am still in the initial learning curve for javascript, I'm not sure
what to look for or where to look.

1) Can I do what I want but just don't know how?
2) Is there a way to put the link on the page via HTML and keep it
disabled/invisible until the animation plays?
3) Does anyone have any other ideas?

TIA.

Charles...
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.682 / Virus Database: 444 - Release Date: 5/11/04

[Mick White]

Charles Crume wrote:

<snip>

If I put the following in a page:

<script>
setTimeout('document.write("ABC")', 1000);
setTimeout('document.write("456")', 2000);
</script>

I get: ABC and the 456 never appears!!

I am confused!!

Once the document is loaded, any subsequent "document.write()"
statements will overwrite all content on the page.

Look into using "document.getElementById()" collection

<p id="goobers"></p>

[Charles Crume]

Hi Mick;

"Mick White" <mw******@BOGUSrochester.rr.com> wrote in message
news:R6********************@twister.nyroc.rr.com.. .

Once the document is loaded, any subsequent "document.write()"
statements will overwrite all content on the page.
Look into using "document.getElementById()" collection

[snip]

Thanks for the reply. I am checking into getElementById(). However, I still
do not understand why the document.write() in the 2nd setTimeout does not
get displayed. What am I not understanding here??

Charles...

---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.682 / Virus Database: 444 - Release Date: 5/11/04

[Robert]

In article <jC**************@fe2.columbus.rr.com>,
"Charles Crume" <[e-mail]> wrote:

<script>
document.write("123");
document.write("456");
setTimeout('document.write("ABC")', 1000);
</script>

I get: 123456, then after 1 second this is replaced by ABC -- I would expect
123456ABC

It may be that setTimeout is a function that waits for one second then
the line of code after it gets run. In reality, setTimeout schedules a
function, write.document, to be run one second from from the call to to
setTimeout. The statement following the setTimeout is run next. Since
it is a </script> the rest of the document is processed.

The run order of the following is:
{1}<script>
{2}document.write("123");
{3}document.write("456");
{4}setTimeout('{in one second}document.write("ABC")', 1000);
{5}</script>
{6}<p>Is inserted in the document before the document.write
gets run.</p>

Were number and words in { } are the run sequence.

Robert

[Richard Cornford]

Charles Crume wrote:

"Mick White" wrote :

Once the document is loaded, any subsequent "document.write()"
statements will overwrite all content on the page.
Look into using "document.getElementById()" collection [snip]
Thanks for the reply. I am checking into getElementById().

I am not sure what - getElementById - has got to do with the problem, -
innerHTML - or the nodeValue - and - date - properties of text Nodes
seems more related, though getting a reference to some element in which
to modify the contents would probably involve - getElementById - at some
point.
However, I
still do not understand why the document.write() in the 2nd
setTimeout does not get displayed. What am I not understanding here??

<snip>

The second timeout never happens because the first - documjent.write -
*replaces* the current document, including all accompanying scripts and
scheduled timeouts.

(Incidentally, if you actually wanted to use - document.write - to
replace the current document (or to write into a pop-up or IFRAME's
document) then it is necessary to also call - document.close - so that
the browser knows you have finished writing. It also becomes symmetrical
to call - document.open - prior to starting to write to a closed
document, though all implementations seem to implicitly call it when the
first - document.write - is executed.)

Richard.