Basic Image Positioning

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • John Leeke
    #1

    Basic Image Positioning

    How are images positioned on a page?

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

    **********
    <img src="officecam0 000.jpg" name="myImageNa me">
    <script language="JavaS cript">
    function reloadImage() {
    var now = new Date();
    if (document.image s) {
    document.images .myImageName.sr c = 'officecam0000. jpg?' +
    now.getTime();
    }
    setTimeout('rel oadImage()',100 00);
    }
    setTimeout('rel oadImage()',100 00);
    </script>
    **********

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

    **********
    <p align="left"><i mg border="0" src="officecam0 000.jpg" width="150"
    height="130"><b r>
    OfficeCam(10sec .update)</p>
    **********

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

    Thanks for your help.

    John

    Tags: None
    • Grant Wagner
      #2
      Re: Basic Image Positioning

      John Leeke wrote:
      [color=blue]
      > How are images positioned on a page?[/color]

      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
      [color=blue]
      > In particular, how do I adapt the following javascript code:
      >
      > **********
      > <img src="officecam0 000.jpg" name="myImageNa me">[/color]

      Drop this.
      [color=blue]
      > <script language="JavaS cript">[/color]

      <script type="text/javascript">
      [color=blue]
      > function reloadImage() {
      > var now = new Date();
      > if (document.image s) {
      > document.images .myImageName.sr c = 'officecam0000. jpg?' +
      > now.getTime();
      > }
      > setTimeout('rel oadImage()',100 00);
      > }
      > setTimeout('rel oadImage()',100 00);[/color]

      Move this to <body onload="setTime out('reloadImag e()',10000);">
      [color=blue]
      > </script>[/color]

      This script does no "positionin g" 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.
      [color=blue]
      > **********
      >
      > so that it positions and sizes the image the same as this html code:
      >
      > **********
      > <p align="left"><i mg border="0" src="officecam0 000.jpg" width="150"
      > height="130"><b r>
      > OfficeCam(10sec .update)</p>
      > **********
      >
      > I am new to javascript, so you may have to spell it out for me.[/color]

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

      --
      Grant Wagner <gwagner@agrico reunited.com>
      comp.lang.javas cript FAQ - http://jibbering.com/faq

        Comment

        Previous template Next
        Working...