How to Add Christmas Tree Lights to a Web Site

A Javascript Function for Animating Christmas Decorations

Nov 18, 2008
Mark Alexander Bain

A simple Bauble for a Christmas Tree - Mark Alexander Bain

Every Christmas tree needs flashing lights - and with Javascript that Christmas tree and its decorations can be on a web site.

One of the iconic images of Christmas is the Christmas tree: there's one in every town center, every shop window, and every home - each one decorated in baubles and flashing lights; and, of course, every web site should have it's own Christmas tree as well.

A Christmas tree on a web page can take one of two forms:

a static image - either a single image of a tree and it's decorations, or an image of a tree with images of decorations superimposed on it
a dynamic image - a tree with images of decorations that are animated using Javascript - for instance: lights that flash on and off

A Static Christmas Tree

Both the animated and the static Christmas trees start with the same images:

a tree - this will form the background and can be created in applications such as Microsoft Paint
the Christmas lights - these can be simple colored circles created with icon editors such as KIconEdit or Sib

The images can now be combined in a web page, however they will not be laid out as normal on web page (i.e. side by side or one above the other), instead:

the lights need to be displayed on top of the tree
any other web page content needs to be displayed over both the tree and the decorations

This is actually done very easily by modifying the style of each image - the style is used to define how an object (such as an image) looks and behaves, and has some useful properties:

position - this will be set to absolute so that each image is anchored to a set location on the web browser display
top - defines the top of the image (defined in pixels from the top of the web browser display)
left - defines the left of the image (like the top it is defined in pixels but from the left edge of the web browser display)
z-index - this allows images and text to be layers - in this case:
- the tree image will be given a z-index of 0 because that will the lowest layer
- the light images will be given a z-index of 1 so that they lie on top of the tree image
- any web content will be given a z-index of 2 so that overlays all of the Christmas decorations

The end result is an image of a tree:

<body>

<img id=tree src=tree.jpg

style=position:absolute;z-index:0>

Overlaying the tree will be the decorations<:/p>

<img id=red src=red.png

style=position:absolute;z-index:1;left:96;top:225>

<img id=red src=red.png

style=position:absolute;z-index:1;left:320;top:225>

<img id=blue src=blue.png

style=position:absolute;z-index:1;left:200;top:50>

<img id=blue

src=blue.png style=position:absolute;z-index:1;left:300;top:150>

<img id=yellow src=yellow.png

style=position:absolute;z-index:1;left:229;top:157>

<img id=yellow src=yellow.png

style=position:absolute;z-index:1;left:200;top:305>

And overlaying both the tree and the decorations will be any web content:

<h1>O Christmas Tree</h1>

O Christmas Tree! O Christmas Tree!<br>

Thy candles shine so brightly!<br>

O Christmas Tree! O Christmas Tree!<br>

Thy candles shine so brightly!<br>

From base to summit, gay and bright,<br>

There's only splendor for the sight.<br>

O Christmas Tree! O Christmas Tree!<br>

Thy candles shine so brightly!<br>

</div>

</body>

Making the Christmas Tree Lights Flash by Using Javascript

The technique for making the Christmas tree lights turn on and off is quite simple:

a timer repeatedly runs a function that controls the Christmas tree lights
the function uses a random number to decide which lights to turn on or off
the flashing lights are achieved by making the light images visible or invisible (using the style's visibility property)

The script starts by creating an array containing a list of colors to be used:

function flash_lights () {

var colors = new Array ("red", "blue", "yellow");

One of these colors is then randomly selected:

var rand_no = Math.random();

rand_no = parseInt (rand_no * colors.length);

color = colors[rand_no];

The script then loops through all of the images on the page and hides any that have an id equal to the randomly selected color:

for (var i=0;i<document.images.length;i++) {

document.images[i].style.visibility = "visible";

if (document.images[i].id == color) {

document.images[i].style.visibility = "hidden";

}

Finally the function resubmits itself - giving itself a one second (1000 milliseconds) delay:

setTimeout ('flash_lights()', 1000 );

}

Of course, the function must be called from the Javascript code in order for the lights to start flashing:

flash_lights ();

</script>

Conclusion

This is simple technique that can be implemented very quickly, and it can easily be adapted to other types of displays - for example:

a chain of flashing lights across a web page
a flashing nose for Rudolf the Reindeer

And the key is having just the right images and a single Javascript function.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...