I need one of those little money thermometers for a webpage. Over time it will have to be updated to fill. Ideally, I'd like not to have to muck about in any graphics programs to get that done. It seems like this should be possible with a little CSS.
I'm definitely going to need two thermometer images:
Now I need to overlay two divs:
Finally place the labels:
The one remaining thing to make this flexible is the ability to easily edit the thermometer image to make it more easily editable. Without significant work, an easy way to do this is export the image as a SVG: thermometer.svg. To change the colors or number of tick marks is now a matter of fiddling with a couple numbers in a text editor. To generate the PNGs, just use Batik (webstart doesn't allow export). The image has a very simple script embedded in it that makes it render differently with a ?full parameter.
