HTMLに横型ゲージを表示させたい

私はCGIゲームを作成しているのですが、
HTMLのページにゲージを表示させる方法が
全くわかりません。
よく、ゲームであるようなHPゲージのような感じです。
静止画ページなので、
imgのwidthをスクリプト内で計算して、
<img ~現HP~><img ~最HP~>という感じで正直微妙な感じです
javascriptでもいいのでHTMLに表示させる方法はありませんでしょうか？
spanタグを使用して<img ~最HP~>代わりにして
<img ~現HP~>のwidthを%化して
代わりにやってみたのですが、
テキストがないとspanの背景画像は表示されないようなので、
わかりません。

No.1 ベストアンサー 回答者： steel_gray 回答日時： 2008/07/11 16:32

spanはインライン要素なのでwidthが効きません。

divにしてみてはどうですか？

例）
<div style="width:200px;background-color:#cccccc">
<div style="width:30%;height:12px;background-color:#c00"></div></div>

No.2 回答者： steel_gray 回答日時： 2008/07/11 16:39

#1です。

補足で。
IEだと文字の高さは確保されてしまうようなので、
細いゲージにしたければ、font-size:1px;とか入れておかないと高さが一定以下にできません。