Rotating the Colors

Allowing the user to press a “rotate” link that moves the colors one layer outward can add some fun interactivity. All the colors move from smaller squares to larger ones, and the color on the bottom layer becomes the color on the top layer. The HTML to accomplish this is pretty simple, as we can see in Example 11-4. Just add this table row underneath the last text field.

Example 11-4. Rotate colors link

<tr>
    <td class="copy" colspan="3">
      <br><a href="#" 
      onClick="javascript:rotateColors(); 
      return false">rotate colors</a>
    </td>
</tr>