| home / programming / javascript / mk / column3 / 1 |    [previous][next] |
|
|
|
We have the large gradient and all of the other images from the larger color picker are straight forward: we have a pair of arrows, the color slider and a few borders. What we are left with, however, is the smaller gradient image in the smaller color picker window. We could take this image from Photoshop but I would like it to be a bit larger so we have to make it from scratch!
How do we possibly make this image from scratch? Let's begin by examining the image in detail. The image above is blown up to 200% and broken out into sections. You'll notice that there are 6 sections here..
Looking at our image you'll notice that the far left of the image starts out with red at 100%. Green then gradually climbs to 100% making yellow. Red fades to 0%, Blue goes to 100%, Green goes to 0%, Red goes to 100% and finally Blue drops to 0%. By fading each of these colors in and out gradually we get the nice gradients that are in the image.
The Brightness of our image also changes. At the top the image is pure white (100% bright), at the bottom it is pure black (0% bright) and it fades between. White and Black are given again at the far right.
The original image size is 198x15. I'd like to increase this to, say, 350px wide and 20px high in order to make it a bit more usable. We can resize the image in photoshop, but when we scale an image up photoshop makes up some colors and we loose detail. So what's the other option? Well we know that the image is made of 6 gradient sections each fading from white to black. We can actually re-create this "image" with 7,000 1x1 DIV tags (350*20) each with its own background color.
As you can imagine, creating 7,000 DIV tags is going to be VERY slow. Fortunately we only have to do it once. After that we can do a print screen and save the result as another image.
If you run the above code you will get the image to your left as a result, but it will take a little while. What exactly is this code doing? Well let's take a look.
The loop at the bottom of our script loops from 0 to 7000 (350*20), creating a new DIV each time and dropping it into our 350x20 DIV at the top of our script. It also adds a 1x1px image to each DIV to insure that the DIV stays 1x1px and doesn't grow larger. This is fairly straight forward. The complicated part is in the getHorizColor function.
We're actually going to be using this getHorizColor function later in our script which is why it was written like it is (able to get a color from any number 0-->7000) instead of in some type of a loop.
To start with we set 6 variables that will be used in the rest of our function. sWidth is the "section" width. A section is defined as the space when a color is shifting. If you look at the previous image breaking apart the color gradient you will see that there are 6 different sections. We are actually adding a 7th section in our code to allow for a white-->black gradient section.
Next we set C to the current column and R to the current row. For example if we pass 5000 we get a position of x=100, y=14. c is then set to the column number in the current section. Since our sections are 50px wide in this example c will always be between 0 and 50. Finally l and h are both set to the "color percentage". When our column is at the beginning of a section the color will be 100% and then it will fade off from there. l is set to the increasing percentage, h to the decreasing percentage.
We know that our Red, Green and Blue values need to fade from 0%-->100% and from 100%-->0% depending on the current column. That's exactly what lines 18-20 do. Line 18 expanded says:
We then do the same thing for the Green and Blue values. The exact values for when the Reds, Greens and Blues change are based on our previously learned ideas. Now that we have our color gradient going left-->right we need to adjust these colors based on the row: The colors need to go from white-->black. Lines 22-->34 accomplish this. If our row is in the top half of our image the color is faded from white. If it is in the bottom half it is faded to black.
Now that we've seen how to go from code-->an image, it should be obvious how to go from the image-->a color. By detecting where the mouse is over our image we can get an index and pass it to our getHorizColor function to get a color back.
| home / programming / javascript / mk / column3 / 1 | [previous][next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
Created: March 27, 2003
Revised: Sept 1, 2006
URL: http://webreference.com/programming/javascript/mk/column3/1
