How to rotate header image randomly

Date: 31 May 2009
Source: GraFX

The modern design requires large header images, and not only one image but more that rotate randomly. This is why we have tried to find a solution to make this happen in Company Website Builder (a compatible method for other software). There are in fact 2 methods to rotate headers, the advertising module and the easier way, simple JavaScript.

The first thing you need to do is to create some images of the same size. The best choice is to create one image in Photoshop (or Fireworks) with more layers, each layer being an image that should be exported. For example, create 5 images of 980 pixels * 200 pixels. Name them picture0.jpg, picture1.jpg, picture2.jpg, picture3.jpg, picture4.jpg. Upload them on your server to the images/ directory.

Simple JavaScript method

I would start with the simple JavaScript method. This can be easily accomplished. Place the code below into the header where you want the images to be.

As you can see the layer's ID is back_ground. You will find it below in JavaScript at getElementById. Copy this JavaScript into the code, preferable to the end of the HTML source, in front of the < /body > tag. Also replace #_# with _ in code, we used like this to not execute now the code.


After placing it into the code, the pictures should be uploaded randomly. If you have more than 5 pictures, increase the number in JavaScript - (Math.random()*4).

Header through advertising module

If you looked closely to the HTML code of the template (or in readme) you can see that there are 2 possibilities to place banners on the site.


In the latter versions we will change the PHP to be only one, but for the moment let's see what can we do. These advertising modules can be managed from back office (/admintool/) - the Advertising module. Here you can upload new images or flash files (swf). Following the example above, let's place in

Now, from the admin module, upload some images in LEFT side. The images should of the same size, as we have mentioned above. In the admin module at Configuration, at "Home page variables" - "Number of advertising from the left side" put 1. Replace #_# with _ in code, we used like this to not execute now the code.

This is a setting of how many images should be displayed in the LEFT module. We need only one image now. If you check the first page now, you will see how the images from the advertising module are being uploaded. If you have a Flash file, this will also be shown.

Other faq items