The Visible Light Spectrum

I am taking a Light and Photography course at school where we are learning about the electromagnetic spectrum (EMS) and visible light, color temperature, etc. When giving us a website for the EMS, my professor mentioned he could not find one that was more “interactive”. So, me being the overachiever, I decided to make one. This is how I made it…

I wanted to make a spectrum with clickable areas to display each color. I did not want an image map. Image maps went out with tables. So I created the color background using a multicolor gradient overlay in Photoshop. I then measured out how many pixels each color was. Using some CSS, I created a div that was the height and width of the image I created and made the image the background. I then created a div for each color in the spectrum. With the parent class .color, I was able to float all of color divs left and give them a specific height…

.color{
float: left;
height: 196px;
}

Then, each color got its own color ID that was defined by the different widths.

Now, the hover part. To make each of these colors a link, I simply used blank .gif images set to specific widths. When you would click on the invisible image, the color information comes up. The color boxes were done by code I adapted from the Lightbox JS project, which is linked on the EMS site. Maybe when I get some more time, I will do the entire EMS, not just the visible light sections. Later!