Build a Web-safe Color Palette Application-2 : Page 2

by Tom Duffy

Mar 22, 2004

Page 2 of 3

Create a Web-safe Palette
This solution has two goals—displaying the Web-safe palette and making it interactive. Displaying the palette is easy; you use some nested loops and a simple array to build a table whose cells each represent a different entry in the palette. A pair of radio buttons on the page lets users choose whether they're selecting a foreground or a background color. Finally, to make the display interactive, you can connect the onClick event for each colored cell in the table to a function that applies the selected color to either the foreground or background color of a separate display—based on the currently selected radio button. Simple event handlers for the radio buttons maintain the foreground/background value, and a "dummy" <div> tag holds content so users can see the effect of their chosen colors immediately.

To get started, open up your favorite text editor and add the following code:

   <html>
   <head>
   <title>Web Safe Color Palette App</title>
   <style>
   body,td {
      font: 10pt Tahoma, Arial, Helvetica, sans-serif;
   }
   td {
      cursor: pointer;
      cursor: hand;
   }
   #colorTable {
      position:absolute;
      top:0;
      left:0;
      width:350;
   }
   #controls {
      position:absolute;
      top:5;
      left:360;
      width:350;
   }
   #testArea {
      position:absolute;
      top:70;
      left:360;
      width:400;
      padding: 5px;
   }
   </style>
   </head>
   <body>
   
   </body>
   </html>

The CSS Rules shown above position elements on the page. Next, create three <div> tags to hold the color table, the radio button controls, and a test area where the color effects appear. Because each of the <td> cells will be clickable, the td rule turns the standard cursor into the hand cursor when users move the mouse over a table cell. Note that the rules don't specify any colors—users will determine the colors in the testArea by clicking on the cells in the palette.

Add the following between the <body> tags:

<u>
<div id="colorTable">
   <script type="text/javascript">
      document.write(createTable());
   </script>
</div>

<div id="controls">
   <table cellspacing="5" cellspacing="5">
      <tr>
         <td>
           <input type="radio" 
           name="colorControl" 
           checked="true" value="fore" 
           onClick="colorToSet='fore';">
           Set Foreground Color</input>
         </td>
         <td><input type="radio" name="colorControl" 
           value="back" onClick="colorToSet='back';">
           Set Background Color</input>
         </td>
     </tr>
     <tr>
         <td id="foreground">Foreground: 000000</td>
         <td id="background">Background: ffffff</td>
     </tr>
   </table>
</div>

<div id="testArea">
   <p>Lorem ipsum dolor... (get the complete 
   placeholder text from the code download)</p>
</div>
</u>

The colorTable <div>'s content will be generated by a function called createTable(). Also note that the controls <div> possesses two radio buttons—one to set the foreground color and one to set the background color. Each radio button has an onClick event that sets the value of a flag—colorToSet—in the script to either "fore" or "back". The function that displays the selected colors in the testArea <div> will check this flag to see which property to change. The controls <div> also contains labels that display the current color values of the foreground and background properties of the testArea. Initially, these values are set to black text (#000000) on a white (#ffffff) background. Finally, the testArea <div> contains some placeholder text so users can see how the colors interact.

« Previous Page 123 Next Page »

0 Comments (click to add your comment)

Comment and Contribute