Jsprogressbarhandler

slaut a tous,j'ai trouver une progressbar js et je l'integrer dans mon site,mais j'ai trouver un probleme d'affichage des bar.voila mon code :

code css:

/* General Links */

a:link { text-decoration : none; color : #3366cc; border: 0px;}
a:active { text-decoration : underline; color : #3366cc; border: 0px;}
a:visited { text-decoration : none; color : #3366cc; border: 0px;}
a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}
img { padding: 0px; margin: 0px; border: none;}

body {
margin : 0 auto;
width:100%;
font-family: 'Verdana';
color: #40454b;
font-size: 12px;
text-align:center;
}


.content {
margin:20px;
line-height:20px;
}

body h1 {
font-size:14px;
font-weight:bold;
color:#CC0000;
padding:5px;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
}



#demo {
margin : 0 auto;
width:100%;
}

#demo .extra {
padding-left:30px;
}

#demo .options {
padding-left:10px;
}

#demo .getOption {
padding-left:10px;
padding-right:20px;
}

code phtml :

<div id="demo">


<span style="color:#006600;font-weight:bold;">Program Efficiency</span> <br/>
<span class="progressBar" id="element1">15%</span>
<span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','0');return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/empty.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Empty Bar'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','+5');return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/add.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Add 5%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','-5');return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/minus.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Minus 5%'" /></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','15');return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/set.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Set 15%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','100');return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/fill.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Fill 100%'" /></a></span>
<span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element1'));return false;"><img src="<?php echo $this->baseUrl()?>/goodies/images/icons/get.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Get Current %'"/></a></span>
<span id="Text1" style="font-weight:bold">&laquo; Select Options</span>
<br/><br/>

code javascript :

<script type="text/javascript">

document.observe('dom:loaded', function() {

// first manuale progressbar : different bar (width, height, images) and no animation
manualPB = new JS_BRAMUS.jsProgressBar(
$('element5'),
75,
{
showText : false,
animate : false,
width : 154,
height : 11,
boxImage : 'images/bramus/custom1_box.gif',
barImage : 'images/bramus/custom1_bar.gif'
}
);

// second manual example : multicolor (and take all other default paramters)
manualPB2 = new JS_BRAMUS.jsProgressBar(
$('element6'),
52,
{

barImage : Array(
'goodies/images/bramus/percentImage_back.png',
'goodies/images/bramus/percentImage_back1.png',
'goodies/images/bramus/percentImage_back2.png',
'goodies/images/bramus/percentImage_back3.png',
'goodies/images/bramus/percentImage_back4.png'
),

onTick : function(pbObj) {

switch(pbObj.getPercentage()) {

case 98:
alert('Hey, we\'re at 98!');
break;

case 100:
alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
break;

}

return true;
}
}
);
}, false);
</script>

<!-- jsProgressBarHandler prerequisites : prototype.js -->
<script type="text/javascript" src="<?php echo $this->baseUrl()?>/goodies/js/prototype/prototype.js"></script>

<!-- jsProgressBarHandler core -->
<script type="text/javascript" src="<?php echo $this->baseUrl()?>/goodies/js/bramus/jsProgressBarHandler.js"></script>


<!-- STATS -->
<script src="<?php echo $this->baseUrl()?>/mint/?js" type="text/javascript"></script>

<script src="<?php echo $this->baseUrl()?>http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
_uacct = "UA-107008-4";
urchinTracker();
// ]]>
</script>

Inutile de poster plusieurs fois le même message.