Crossfade Calculator

Number of Images:

Time on Each Image (Seconds):

Time for Transition (Seconds):

Width of Images (px):

Height of Images (px):

This tool allows you to create a crossfade banner for your website. The HTML is simply a <div> with the class "crossfade" containing a number of <a> elements which each contain one image. To use the tool you must set the properties of the crossfader in the text boxes above then paste the code which appears to the left into your website's stylesheet. Here's some example HTML (for a crossfader with 6 images).

<div class="crossfade">
 <a href="page_6.html" >
  <img src="crossfade_6.png" />
 </a>
 <a href="page_5.html" >
  <img src="crossfade_5.png" />
 </a>
 <a href="page_4.html" >
  <img src="crossfade_4.png" />
 </a>
 <a href="page_3.html" >
  <img src="crossfade_3.png" />
 </a>
 <a href="page_2.html" >
  <img src="crossfade_2.png" />
 </a>
 <a href="page_1.html" >
  <img src="crossfade_1.png" />
 </a>
</div>