Example: Traffic Light

This example uses three Image Toggle controls laid on top of a traffic light background. The image is selected by using the selected({Object} v) function defined for SS.control.imagetoggle.

Each step in the sequence is defined using an object called sequence which has been created. E.g.

var sequence =  function(top,middle,bottom,delay)
       {
        this.top = (top) ? top : "off";
        this.middle = (middle) ? middle : "off";
        this.bottom = (bottom) ? bottom : "off";
        this.delay = (delay) ? delay : 5000;
       };

Images inside each of the Image Toggle controls have a value attribute containing the name of the light that should be displayed, and it's off equivalent e.g. "red", "off" or "green", "off".

The .top, .middle, and .bottom members of the sequence object hold the value which is passed to the relevant Image Toggle control to determine what light should be displayed. E.g.

//get the Top Light Image Toggle
var lightTop = $gc("togLightTop");

if(lightTop)
{
   //set the top light Image Toggle Control
   //to the image value held in the
   //current sequence object.
   lightTop.selected(seq.top);
}

The delay member of the sequence object defines how long it should display the current light sequence before moving on.