Basic Image Positioning

Discussion in 'Javascript' started by John Leeke, Oct 23, 2004.

  1. John Leeke

    John Leeke Guest

    How are images positioned on a page?

    In particular, how do I adapt the following javascript code:

    **********
    <img src="officecam0000.jpg" name="myImageName">
    <script language="JavaScript">
    function reloadImage() {
    var now = new Date();
    if (document.images) {
    document.images.myImageName.src = 'officecam0000.jpg?' +
    now.getTime();
    }
    setTimeout('reloadImage()',10000);
    }
    setTimeout('reloadImage()',10000);
    </script>
    **********

    so that it positions and sizes the image the same as this html code:

    **********
    <p align="left"><img border="0" src="officecam0000.jpg" width="150"
    height="130"><br>
    OfficeCam(10sec.update)</p>
    **********

    I am new to javascript, so you may have to spell it out for me.

    Thanks for your help.

    John
     
    John Leeke, Oct 23, 2004
    #1
    1. Advertising

  2. John Leeke

    Grant Wagner Guest

    John Leeke wrote:

    > How are images positioned on a page?


    They are positioned according to HTML layout standards... that is, an
    image appears inside inline elements inline and if placed in a block
    element will be separated from other block elements according to the
    default CSS of the specific HTML elements in a particular browser.

    So you can test:

    <!-- block test -->
    Test
    <div><img ...></div>
    Test

    <!-- inline test -->
    Test
    <span><img ...></div>
    Test

    > In particular, how do I adapt the following javascript code:
    >
    > **********
    > <img src="officecam0000.jpg" name="myImageName">


    Drop this.

    > <script language="JavaScript">


    <script type="text/javascript">

    > function reloadImage() {
    > var now = new Date();
    > if (document.images) {
    > document.images.myImageName.src = 'officecam0000.jpg?' +
    > now.getTime();
    > }
    > setTimeout('reloadImage()',10000);
    > }
    > setTimeout('reloadImage()',10000);


    Move this to <body onload="setTimeout('reloadImage()',10000);">

    > </script>


    This script does no "positioning" of the image, it simply attempts to
    guarantee (assuming client-side JavaScript) a fresh copy of the image
    gets loaded into the user agent approximately every 10 seconds.

    > **********
    >
    > so that it positions and sizes the image the same as this html code:
    >
    > **********
    > <p align="left"><img border="0" src="officecam0000.jpg" width="150"
    > height="130"><br>
    > OfficeCam(10sec.update)</p>
    > **********
    >
    > I am new to javascript, so you may have to spell it out for me.


    <head>
    <title>...</title>
    <script type="text/javascript">
    function reloadImage() {
    if (document.images) {
    document.images['myImageName'].src =
    'officecam0000.jpg?' + (+new Date());
    }
    var t = setTimeout('reloadImage()', 10000);
    }
    </script>
    </head>
    <body onload="setTimeout('reloadImage()', 10000);">
    <img name="myImageName"
    border="0" src="officecam0000.jpg"
    width="150" height="130">
    <br>
    OfficeCam (10 second update)</p>
    </body>

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Oct 25, 2004
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jerry Camel

    Image Positioning

    Jerry Camel, Oct 11, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    449
  2. ftgow

    Image positioning.

    ftgow, Jun 9, 2004, in forum: HTML
    Replies:
    1
    Views:
    433
    Jeff Thies
    Jun 10, 2004
  3. Ilya
    Replies:
    9
    Views:
    1,845
  4. bulge
    Replies:
    8
    Views:
    6,164
    bulge
    Jul 19, 2004
  5. Spartanicus

    Basic CSS positioning Question??

    Spartanicus, Sep 5, 2004, in forum: HTML
    Replies:
    11
    Views:
    585
Loading...

Share This Page