Using script to make an image line

So you want to make an image line like the one above and use it several times on the same page? But you don't want to fatten up your code by repeating the <img src=your.gif> umpteen times. The line can also be made to span the screen on all browsers from WebTV's 544 pixel width to whatever size PC users have their resolution settings.

Here is a simple technique to repeat images and keep your code's file size minimized: The first step is to define a variable that equals the image source tag. Include all attributes (size, border, etc) within the tag. Then, each time you want the line to show, include the short script instead of numerous html tags.


SIMPLE REPEAT WITH EQUAL SIZES & SPACING

Let's start simple with one image repeated a number of times. I used the hspace attribute to spread this one out a bit. Instructions for making large numbers of repeats with small images is included in the C&P codes below.

SIMPLE REPEAT WITH VARYING SIZES OR SPACING

The idea here is to define the repeating part as one variable, then define the line as repeats of that variable. You may need to add a finial if you want your line to start and finish the same. Note variable "im1" as my finial.

The Big Image Line

There are many factors to consider with more elaborate lines.
  1. The width of the screen can not be exceeded or your line will carry over into a second row. You must know the width of your images or add width attributes to your html tags to control total width. Most of my images are 32 pixels wide. That limits the number used to 17 if the line will work for WebTV (544).
  2. Screen widths vary widely. To have the line appear near full screen width for all browsers, it is best to use tables and specify the width as a per cent. I used thirteen (13) elements in this line and sized each table data cell at 7% to give a total width of 91%.
  3. The most efficient way to trim code size is to define the line within a javascript function and call up the function each time you want the line to appear. I have placed the function in the head section of this page.
  4. The function begins by naming it and starting a container to hold its elements with a curly bracket.
    function name() {
    Then each variable for your html tags is defined:
    var im="<img src= >";
    var im1="<img src= >";
    var im2="<img src= >";
    Next the variable for the line is defined. It is simply the sum of the components named in the other variables. Components may be repeated and/or randomized (see notes below).
    var line=im+im1+im2+im1+im;
    Finally the argument to "write" the code to the screen is added and the function is closed with the right facing curly bracket.
    document.write("<table>"+line+"</table>"); }
    I included the table opening and closing tags in this argument. The cells are opened and closed in the individual variable definitions (see C&P code below).
  5. The line is "written to the screen" by calling the function name where you want the line to appear.
    <script language="javascript">
    <!--
    name();
    -->
    </script>

NOTES:

  • The code trimming characteristics of this process can be accomplished with server side includes (SSI); however, many web hosts do not support SSI.
  • SSI and javascript coding of image lines allow the webmaster to change the line easily. This is done by changing only one tag for each image change. Normal html coding would require an edit of the code for every time it appears on the page.
  • By using a random number generator and applying it to an array of images, the line may show a different combination and/or arrangement of images each time the page loads. See my Random Happenings for webpages.

My Scripts

Copyright © 2002 T R Landrum

HOME