Ich habe sowas schonmal als Anzeige für Nachlade-Status (AJAX) verwendet.
Verwendet habe ich diese Grafik. (Etwas zu groß um sie direkt ins Forum zu binden.
Erstellt/verwaltet habe ich das dann mit einer eigenen Klasse und Prototyping und hastenichgesehen also völlig unnütz für dein PHP-Anliegen.
Das entstehende HTML (aus Bugzilla) sah dann so aus:
<div style="
width: 100px;
height: 15px;
background-image: url("./gauge.png");
background-repeat: no-repeat;
background-color: rgb(136, 136, 136);
border-style: groove;
text-align: center;
vertical-align: middle;
font-size: small;
color: rgb(255, 255, 255);
background-position: 0px -985px;
position: fixed;
left: 350px;
top: 0px;
z-index: 100;
">
100%
</div>
-985px ist halt 100% alles recht leicht zu verrechnen, denn background-position ist einfach (ProStimmen/(ProStimmen+ContraStimmen)*Grafikhöhe*(-1).
In meinem JS sah das dann so aus:
Math.round(my_value/my_max*this.imgheight-this.height)+"px";
Is klar 'ne?
my_value ist der Absolute (nicht %) Wert, den das Ding annehmen soll
my_max ist der Maximalwert, den das Ding annehmen kann
imghight ist die Höhe der Grafik
this.height ist die Höhe des DIV-Elements.
(stammt btw. aus einem GM-Script, welches mich und andere beim Verwalten/Bearbeiten eines Typo3 unterstützt).
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(