The Layout Control



The Layout control is a topic all to itself and a full discusion on what it can do can be found on the ActiveX pages. What I am going to do is show how it can be used purely in a graphical context.

Most of these examples can be used without modification in any web page. The first thing you need to know is how to put the control onto a page. Most HTML Editors will allow you to insert the Layout Object and if not they will allow you to insert HTML directly.
Here is the code.
<OBJECT ID="object_name"
     CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
     CODEBASE="">
        <PARAM NAME="ALXPATH" REF VALUE="layout/transition.alx">
</OBJECT>

What this does is to display the layout in the file transition.alx on a web page and give the layout object the name object_name. Obviously you need to know what the .alx file is called and where it is but you can call the object anything you like. The only proviso here is that if you are going to put more than one on a page it is a good idea to give them different names.

Transitions

These effects are available in many moving image and presentation packages and are very simple to implement. The first few will use only 2 images a timer and a small amount of script and will use 2 images called image1.gif and image2.gif. I will set the timer interval to .2 of a second for all of the examples to keep it simple if a little jerky. Once you have mastered the art you can change these values for a smoother presentation. If you need an explanation of the timer check out the ActiveX pages or MS for an example. Here is an example of the layout and by clicking on it you will see both pictures.

So before we begin here is the .alx file before any script has been added.

<SCRIPT LANGUAGE="VBScript">
<!--

-->
</SCRIPT>
<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:81pt;HEIGHT:56pt;">
    <OBJECT ID="Image1"
     CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
        STYLE="TOP:0pt;LEFT:0pt;WIDTH:82pt;HEIGHT:56pt;ZINDEX:0;">
        <PARAM NAME="PicturePath" VALUE="images/graphlog.gif">
        <PARAM NAME="Size" VALUE="2884;1984">
        <PARAM NAME="VariousPropertyBits" VALUE="19">
    </OBJECT>
    <OBJECT ID="Image2"
     CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
        STYLE="TOP:0pt;LEFT:0pt;WIDTH:82pt;HEIGHT:56pt;ZINDEX:1;">
        <PARAM NAME="PicturePath" VALUE="images/graphlog.gif">
        <PARAM NAME="Size" VALUE="2884;1984">
        <PARAM NAME="VariousPropertyBits" VALUE="19">
    </OBJECT>
    <OBJECT ID="IeTimer1"
     CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
        STYLE="TOP:58pt;LEFT:83pt;WIDTH:25pt;HEIGHT:25pt;ZINDEX:2;">
        <PARAM NAME="_ExtentX" VALUE="873">
        <PARAM NAME="_ExtentY" VALUE="873">
        <PARAM NAME="Interval" VALUE="500">
   </OBJECT>
</DIV>


It looks complicated but it is quite simple really but anyway who cares. All that you need to know is that you can cut the following example code, paste it between the <SCRIPT> and </SCRIPT> tags and have a working example.

The best way to view these is to start with the first one and progress to the end.



 

 

 

1997 Chris Bayes. All Rights Reserved.