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>

How do we make this rotating colors thing actually work? First, we're going to read all of the current color values into an array. We'll then loop again over the layers, placing the new colors ...

Get Advanced JavaScript™: Insights and Innovative Techniques now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial