Letting my geek flag fly

I recently completed an exercise in web page assembly that involves a beautiful poster, a nifty utility for creating 3-D "aqua" buttons, and a JavaScript/DHTML library that allows images to be dragged around on-screen.

The poster was created by Bob Stein of VisiBone, the web site that contains all kinds of web design tools, from HTML, CSS, and JavaScript cheat sheets, to mouse pads, posters, and one of the prettiest world maps to come down the pike in a long time. I've used VisiBone products for years, and this exercise was inspired by Stein's 216-Color Webmaster's Palette, my first purchase from VisiBone.

This exercise really got off the ground when I found The Aqualizer, that utility I mentioned that allows the creation of spiffy 3-D "aqua" buttons in three different sizes. The term "aqua" refers to the liquid look of buttons in Windows Vista and Mac OS X. I created 216 buttons to match the 216 colors of the VisiBone Webmaster's Palette using this neat little utility.

I then spent bits of time over a period of two weeks to re-create the layout of the Webmaster's Palette using those snazzy aqua buttons. It took two weeks because I wanted to get the layout of the buttons just right. Lots of calculations of the Pythagorean Theorem and applications of the Sine Law went into this thing. Bob Stein asked me if I'd written a program to place all of those buttons in the Palette arrangement. I had to admit that I hadn't; it was all manual calculator work and scribbling on graph paper.

But finally it was finished and it looked great. Only one thing would make it better, I thought: allowing the user to drag each of the buttons around to see how its color looked next to another button. This is where Bob Stein turned me onto Walter Zorn's web site and his JavaScript/DHTML library. After spending that two weeks to get the new page looking right, it only took another 90 minutes or so to plug in Zorn's library and enable dragging for every one of those 216 buttons.

I call the page AquaBone for, I hope, obvious reasons. I can't quite figure out how to modify the name to recognize Zorn's contribution, too, in anything like a euphonious way, but I certainly acknowledge him along with Stein and the anonymous creator of The Aqualizer.

Three caveats before you look at the result:

1) The web page contains 217 graphic images, about 570 kilobytes worth. So, if you have a slow Internet connection, it'll take a bit of time for it to load.

2) If you have Internet Explorer 6 or 7, don't press the Refresh key or click the Refresh icon and expect it to refresh quickly. For whatever reason IE takes a loooooong time to refresh this particular page once you've moved a few of the buttons. Netscape 8.1 and Firefox 1.5 act like you'd expect...it's only IE that's the problem.

3) Opera 9.0 doesn't seem to interpret the JavaScript at all. The page is simply static. Beautiful, but static.

All right, you now know more than you really wanted to, so here's the link:

http://www.swerbach.com/AquaBone/

I hope you like it.