Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

This script basically prints tables. Each table cell contains a transparent image which defines the size of the cell. Each cell is also assigned a background color which determines the color that fills that cell. When you click on the image, the hexadecimal triplet is displayed via an alert box, and the background color is set to the selected color.

The main outline of the cube is a table with one row and six cells (columns). Each cell contains a table of all non-dithered colors with a given blue descriptor. There are six tables in total, one for each of the non-dithered colors: 00, 33, 66, 99, CC, FF. Since there are six non-dithered hexadecimal values, each table is 6 x 6: Each row presents a red hexadecimal value and each column represents a green one.


Figure 21-1.  Sorry folks, graphics in the book are limited to black and white.

The final output can be viewed in the following screen:

Now let’s analyze the script itself.

Global Statements

// create 6-element array
var hex = new Array(6)

// assign non-dithered descriptors
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

A six-element array is created as an instance of the Array object. The elements of the array are assigned the six values from which the 216 non-dithered colors, which are supported on all platforms, can be combined. The drawCube() function call at the end of the script is also global.

display(triplet)

// accept triplet string and display as background color
function display(triplet) {
 // set color as background color
 document.bgColor = '#' + triplet
 // display the color hexadecimal triplet
 alert('Background color is now ' + triplet)
}

This function’s single argument is a six-character string representing the hexadecimal RGB triplet of a color. The document’s background color is set, and an alert dialog box displays the selected color’s exact RGB triplet.

drawCell(red, green, blue)

// draw a single table cell based on all descriptors
function drawCell(red, green, blue) {
 // open cell with specified hexadecimal triplet background color
 document.write('<TD BGCOLOR="#' + red + green + blue + '">')

 // open a hypertext link with javascript: scheme to call
   display function
 document.write('<A HREF="javascript:display(\'' + (red + green  +
   blue) + '\')">')

 // print transparent image (use any height and width)
 document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12
  WIDTH=12>')

 // close link tag
 document.write('</A>')

 // close table cell
 document.write('</TD>')
}

This function accepts three arguments: the red, green, and blue descriptors. It creates a table cell with the combined triplet as the background color. The content of each cell is a gif89 transparent image, place.gif. The image’s height and width specification determines the size of each cell. Each image is also a hypertext link to a “javascript:”-scheme URL, which calls the display() function. The argument to this function is a hexadecimal triplet which is also used for the cell’s background. Note that all global array’s descriptors are strings, so the plus sign is used to concatenate the three double-digit hexadecimal values.

drawRow(red, blue)

// draw table row based on red and blue descriptors
function drawRow(red, blue) {
 // open table row
 document.write('<TR>')
 // loop through all non-dithered color descriptors as green hex
 for (var i = 0; i < 6; ++i) {
  drawCell(red, hex[i], blue)
 }

 // close current table row
 document.write('</TR>')
}

This function accepts the red and blue descriptors and prints a table row. The content of the table is created by six calls to the drawCell() function, passing the red and blue descriptors “as is” and a different green descriptor (from the global hex array) on each call.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us