comment on

Make a gif (or png) of the thermometer with the gradiations you need but make the contents of the thermometer transparent.

In the html, define a 2-row x 1-column table, sized so that the image and the table are the same size.

Use css to overlay the image on top of the table and to vary the % of the total table size that the top row (background-color: white) and the bottom row (background-color: red) occupy.

To get fancy, use 4 rows. Have the zero point in the middle. When costs are greater than donations, show red below the zero line (row3). When the donations are exceeding costs, show green above the line (row2).

The main advantage is that you only need a single image that doesn't need to be generated on the fly. You only need to vary 2 or 4 numeric values in the css generated to control the proportions of the colors, which just show through the transparent part of the thermometer image.

In reply to Re: Donation Tracking "Thermometer" by Anonymous Monk
in thread Donation Tracking "Thermometer" by hacker

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


Pathologically Eclectic Rubbish Lister
	PerlMonks