Frieze

Downloading File Zip # 46 Koctets 

   You need three things to define frieze:
       The file bandes.js, library Javascript
       A sprite of frieze 40 X 40 pixels, I joined some specimens in the zip file.
       A Init function containing the frieze definition .

   Insertion of the library
< title>Bandes / Strips 3</title >
< Script LANGUAGE="JavaScript1.2 " SRC=bandes.js></SCRIPT >
   After the title.

    Definition of the frieze
 
       Example of Init file:
function Init() {
 
 xorig = -20
 yorig = 0
 
 imgPath = " images/split0.jpg "
 LELayer = new DessineLayer(imgPath)
 
 LELayer.prog[0 ] = new Array(12, 1, 0, null, null)
 LELayer.prog[1 ] = new Array(6, 0, 1, null, null)
 LELayer.prog[2 ] = new Array(15, 1, 0, null, null)
 LELayer.prog[3 ] = new Array(6, 0, -1, null, null)
 LELayer.prog[4 ] = new Array(12, 1, 0, null, null)

 LELayer.ProgLayer()
}
   You can see:


Exemple 1

   You must define, the graphic image of the frieze and create the object which will draw the frieze:
 imgPath = " images/split0.jpg "
 LELayer = new DessineLayer(imgPath)

   In this example the origin of the first frieze is defined by:
 xorig = -20
 yorig = 0
   the frieze here are followed, the following one beginning where finishes the preceding one, (it is not obligatory).
   Each element of the frieze, here there are 4, are defined by one array like:
 LELayer.prog[0 ] = new Array(12, 1, 0, null, null)
 LELayer.prog[0 ] the name (LELayer) must correspond to the object created previously. prog[0 ] the number of the element of the array fixes the order in which the frieze will be drawn.

   Definition of the segments of frieze:
new Array(12, 1, 0, null, null)
new Array(Images number, horizontal direction, vertical direction, origin X, origin Y)
   Images number : Images number in this segment of the frieze, here 12. The elements make 40 by 40 pixels but this cover with 50 %, the length of this segment will be thus of 20 X 12 = 240 pixels.
   Horizontal direction: it can take values included between 1 and -1
       1  the frieze is drawn left towards the line.
       0  the frieze is not drawn in the horizontal direction
       -1 the frieze is drawn line towards the left.
   Vertical direction: it can take values included between 1 and -1
       1  the frieze is drawn top in bottom.
       0  the frieze is not drawn in the vertical direction
       -1 the frieze is drawn upwards.
   If the two directions are to zero, this element of the frieze is not drawn. The values can be fractional, (example 2).
   Origin X and Origin Y, make it possible to change the origin of the segment, if these values are to null the segment starts where the previous segment stop. One can define only one of two values by leaving the other to null, in this case left the value with null will keep the value of the end of the previous segment, (see example 3).

    Slope of the frieze:
 LELayer.prog[0 ] = new Array(12, 1, 0.5, -20, 0)
 LELayer.prog[1 ] = new Array(6, 1, 0.5, 100, 0)
 LELayer.prog[2 ] = new Array(6, 1, -0.5, 520, 60)
 LELayer.prog[3 ] = new Array(12, 1, -0.5, 520, 120)
 You can see:


Exemple 2
   In this example the vertical direction is fractional, (0.5), for all the segments.
   For the arrays 2 and 3, one sees that the vertical direction is negative, the segment goes up.

    Modification of the origin of the segments.
 LELayer.prog[0 ] = new Array(12, 1, 0, -20, 60)
 LELayer.prog[1 ] = new Array(6, 0, 1, null, 0)
 LELayer.prog[2 ] = new Array(6, 0, 1, 520, 0)
 LELayer.prog[3 ] = new Array(12, 1, 0, null, 60)
 You can see:


Exemple 3
   The second segment, (index 1), starts at the end of the first segment for the horizontal direction, (null), but with value 0 for the vertical direction.
   The third segment, (index 2), requires the definition of the two origins.

   Launching of the drawing
       By the object DessineLayer()'s command ,
               LELayer.ProgLayer()

   Launching of the Init() function
       By the command onload
< body background="images/fond.jpg " onload="Init() " >

   Contents of the page.
       After the tag body, to insert the contents of the page like this, (inside the frieze of example 1 for example):
< div id="Bonjour " class="clsBonjour " style="position: absolute; left: 300; signal: 40; width: 440; height: 44; visibility:visible; z-index:14; " >
 Hello
< / div >
       and for the remainder of the page, in Dhtml or normal HTML, enclosed in one layer such as:
< div id="Nav " style="position: absolute; left: 0; signal: 300; width: 800; height: 800; visibility:visible; z-index:14; " >
     Contents
< / div >

       You can join me to:

Jean-Pierre Pichon


Downloading File Zip # 46 Koctets 

Sommaire
Previous