Click on the Image

About this Page

Screen colors may be expressed as three hue values. The hue values are Red, Green, and Blue since the tube which is the screen has three electron guns which excite red, green, and blue phosphors on the screen. Your browser accepts these values to set the background color of windows and/or table cells The form of this number is #RRGGBB where RR is the red value, GG is the green value and BB is the blue value expressed as hexadecimal numbers. (For example: the value #ffffff is white and #ff0000 is red).

This script uses the server-side image map capability of the browser to return the x and y position where an image is clicked. Ordinarily, when you click on an image which is an image map, you are presented with another page depending on where on the image you clicked. The map resides on the server, and a server-side script is used to interpret which page is to be presented. However, here the link is back to this page, and the script to interpret what to do is the JavaScript on this page.

Since the page is reloaded on each click, the Back button on the browser will not take you directly back to the JavaScript Playground. Click on the hand above to go back.

After you click on the image, look at the location bar and you will see a ? followed by the x and y values after the normal URL. The script picks up these values and uses them to calculate the RGB values for the color clicked on. It then turns the background color of this page to the chosen color.

The color wheel is for a brightness of 100%, and was obtained from a screen capture of the color picker on a Macintosh computer. By changing the brightness value, the entire range of colors may be displayed.

The code is extensively documented. Help yourself, but if you use the code on your own site, please give WebSorcerer credit somehow.

Color Calculation

The diagram below is used to calculate the Red color value. Inside a 120^o area the red color value is FF. Outside this area the color value linearly decreases from the boundary of that zone to the edge of the circle along a line parallel to the x-axis. The relationships were derived by harking back (for me anyway) to high school geometry.

To calculate the green and blue values, the co-ordinates were rotated 120 or 240 degrees, respectively, and new x and y values for the chosen point calculated from the formula shown. JavaScript uses angles in radians for its calculations. Fortunately the value of pi is a built-in Math function.