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 | ![]() |