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

質問

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

回答No.1

steel_gray · ベストアンサー

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

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