var max = 250; /* Total de caracteres */
var ancho = 300;
function contaTextarea(valor) {
var barrinha = document.getElementById(“barrinha”);

if (valor.value.length < max) {
barrinha.style.backgroundColor = "#FFFFFF";
barrinha.style.backgroundImage = "url(http://www.pedrocaires.com.br/blog/extras/images/barrinha001.jpg)"; /* Aqui fica o outro endereço da barrinha */
barrinha.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/250); /* Total de caracteres */
barrinha.style.backgroundPosition = "-"+pos+"px 0px";
} else {
barrinha.style.backgroundColor = "#BB0000";
barrinha.style.backgroundImage = "url()";
barrinha.style.color = "#FFFFFF";
}
barrinha.innerHTML = "("+valor.value.length+" / "+max+")";
}

Exatamente nesta linha:
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/250); /* Total de caracteres */

Ai ele faz uma conta(creio eu ^^), e divide por 250, que é o máximo de caracteres, porém, se eu modifico lá em cima o max p/ 300, e não modifico essa linha, ele irá ficar errado, com um máximo de caracteres no textarea, e nesse efeito ele estará com outro…

Então, acho que o correto mesmo seria colocar assim:
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/max); /* Total de caracteres */

Não manjo muito de JS puro, acostumei com o JQUERY, sei fazer alguns efeitos e tals com JQUERY, então, se eu estiver errado, me corrija…