salve a tutti.
ho finito di realizzare un piccolo sito in php ma in uno slider ho dovuto inserire del codice java per dinamicizzare una progressbar.
ora il mio problema è che vorrei cambiare il colore della progressba una volta che arriva al 50% ed una volta che arriva all'80%.
in poche parole parte in colore arancio, poi al 50 % passa al rosso ed all'80% ad un rosso più intenso. ho provato in tutti i modi ma siccome sono alle prmissime armi in js ho capito che non ci sarei mai riuscito.
potete aiutarmi???
posto parte del codice.

codice:
var colorebarra='orange' ;       // COLORE PROGRESS BAR 
var coloresfbarra='white';     // COLORE SFONDO BARRA
var colorebordo='navy';            // COLORE BORDO BARRA
var barheight=5;                  // ALTEZZA IN PIXEL BARRA
var barwidth=800;                  // LUNGHEZZA BARRA IN PIXEL
var temposlide=<?php echo $temporefresh; ?>;                   // SECONDI DI REFRESH DA SETTARE TRAMITE FILE VARIABILI


var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/temposlide/10;
var attivato=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+colorebordo+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+coloresfbarra+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+colorebarra+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+colorebordo+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+coloresfbarra+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+colorebarra+'; font-size:1px;"></div>';
txt+='</div>';
}


document.write(txt);


function incrCount(){
window.status="Loading...";
attivato++;
if(attivato<0)attivato=0;
if(attivato>=temposlide*10){
clearInterval(Pid);
attivato=temposlide*10;
setTimeout('hidebar()',100);


}
if (attivato==temposlide*10) {
self.location="<?php echo $_GET['img']; ?>";
}
resizeEl(PBdone, 0, blocksize*attivato, barheight-2, 0);
}




function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);


}


function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}


window.onload=progressBarInit;