Запълване на картинка за проценти.

[sentenello]

Здравейте,
имам ето тази картинка


Въпросът ми е как да направя според процентите и тя да се запълва в зелено. Интересува ме вариант който няма да има проблеми под мозила и ИЕ.
благодаря предварително.

П.С. В момента картинката съм я поставил между <td></td> ако това има някакво значение.

 

[magnuma84]

ами по принцип точно такова запълване съм правил, но с флаш. С него става много лесно

 

[shterev]

http://www.webappers.com/progressBar/

 

[sentenello]

ами по принцип точно такова запълване съм правил, но с флаш. С него става много лесно

Би ли ми дал някакво демо, за да видя какво точно си правил и ако ми пасва с идеята да ми помогнеш да го направя ?

 

[sentenello]

http://www.webappers.com/progressBar/

Това което си ми дал е супер, но на мен ми трябва да е пълно според зависимост дадени проценти, а тези проценти аз ще си ги изчислявам в пхп файл-а

 

[shterev]

Ами това е примерен код, то ти можеш да си задаваш колкот искаш да са процентите, просто демо е. А ако напишеш в google - pregress bar javascript ще ти излязат и много други вариянти, може да разгледаш.

 

[sentenello]

Не трябва ли да стане така:
Ако картинката е 240px 120 бяла/120 червена примерно

Да задам в хтмл-а да показва 120px от картинката и след това в една променлива да вземам колко процента трябва да е зелено и толкова процента да е маргин или паддинг ?

 

[marian]

Създаваш един див и му задаваш дължина, височина и му задаваш картинка за фон (примерно някаква рамка). После създаваш още един див, на който му задаваш дължина в проценти (в твоя случай 50%), височина и картинка, която ще се повтаря хоризонтално. Ето ти едно просто примерче:

<div style="width:240px;height:9px;border:1px solid green;">
<div style="width:50%;height:9px;background:blue;"></div>
</div>

 

[sentenello]

Създаваш един див и му задаваш дължина, височина и му задаваш картинка за фон (примерно някаква рамка). После създаваш още един див, на който му задаваш дължина в проценти (в твоя случай 50%), височина и картинка, която ще се повтаря хоризонтално. Ето ти едно просто примерче:

<div style="width:240px;height:9px;border:1px solid green;">
<div style="width:50%;height:9px;background:blue;"></div>
</div>

Точно това имах в предвид
+1