document.write() is replacing image

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Charles Crume

    document.write() is replacing image

    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_ima ge"></p>
    <script language="javas cript">
    function create_link() {
    // document.write( '<p align="center"> <a href="index2.ht m">ENTER</a></p>');
    document.write( '<p align="center"> <a href="index2.ht m">ENTER</' +
    'a></p>');
    }
    </script>
    <script language="javas cript">
    ccs_img = new Image(76, 21);
    ccs_img.src = "images/ccs_logo_animat ed_rotate.gif";
    setTimeout("doc ument['blank_image'].src = ccs_img.src", 2000);
    setTimeout("cre ate_link()", 7100);
    </script>
    -----------------------

    The problem is that when the "create_lin k" 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('doc ument.write("AB C")', 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('doc ument.write("AB C")', 1000);
    setTimeout('doc ument.write("45 6")', 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

    #2
    Re: document.write( ) is replacing image

    Charles Crume wrote:

    <snip>

    [color=blue]
    > If I put the following in a page:
    >
    > <script>
    > setTimeout('doc ument.write("AB C")', 1000);
    > setTimeout('doc ument.write("45 6")', 2000);
    > </script>[/color]

    [color=blue]
    >
    > I get: ABC and the 456 never appears!!
    >
    > I am confused!!
    >[/color]

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

    Look into using "document.getEl ementById()" collection

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

    Comment

    • Charles Crume

      #3
      Re: document.write( ) is replacing image

      Hi Mick;

      "Mick White" <mwhite13@BOGUS rochester.rr.co m> wrote in message
      news:R6yoc.2478 90$e17.53456@tw ister.nyroc.rr. com...[color=blue]
      > Once the document is loaded, any subsequent "document.write ()"
      > statements will overwrite all content on the page.
      > Look into using "document.getEl ementById()" collection[/color]

      [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


      Comment

      • Robert

        #4
        Re: document.write( ) is replacing image

        In article <jCwoc.986$th.9 39@fe2.columbus .rr.com>,
        "Charles Crume" <cc@charlescrum esoftware.com> wrote:
        [color=blue]
        > <script>
        > document.write( "123");
        > document.write( "456");
        > setTimeout('doc ument.write("AB C")', 1000);
        > </script>
        >
        > I get: 123456, then after 1 second this is replaced by ABC -- I would expect
        > 123456ABC
        >[/color]

        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.wri te("123");
        {3}document.wri te("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

        Comment

        • Richard Cornford

          #5
          Re: document.write( ) is replacing image

          Charles Crume wrote:[color=blue]
          > "Mick White" wrote :[color=green]
          >> Once the document is loaded, any subsequent "document.write ()"
          >> statements will overwrite all content on the page.
          >> Look into using "document.getEl ementById()" collection[/color]
          > [snip]
          > Thanks for the reply. I am checking into getElementById( ).[/color]

          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.
          [color=blue]
          > However, I
          > still do not understand why the document.write( ) in the 2nd
          > setTimeout does not get displayed. What am I not understanding here??[/color]
          <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.


          Comment

          Working...