Je ne comprends pas ta façon d'aborder le problème. Tu as une image par état de ta barre ? C'est à dire qu'il y a 20 images différentes, chacune étant plus longue de 5% par rapport à la barre précédente ?
Sephi-Chan
Ce n'est clairement pas la méthode optimale.
Pourrais tu nous montrer une capture d'écran de ta page avec la barre ? Cela permettra de savoir dans quelle mesure elle est graphique et comment améliorer ton script (ou le refaire à neuf).
Sephi-Chan
Moi j'espère que tu changeras ou que tu te casseras.
Et gnagnagna et gnagnagna. Z'avez pas fini, vous deux ?
Valter, pour en revenir à ton problème, je pense que Sephi voulait parler de la méthode selon laquelle il serait pus judicieux de créer simplement une image représentant 1% de la barre (1 pixel de large pour une barre de 100 pixels par exemple) et de créer cette image autant de fois qu'il le faut en l'incluant dans une boucle. SI tu es à 15%, la boucle "bouclera" 15 fois et créera 15 images de 1 pixel à la suite les unes des autres :
15% : |||||||||||||||
("|" étant l'image en question)
Je ne connais pas Javascript en revanche faudra te débrouiller pout le code :langue:
A supposer que tu veuilles garder tes images multiples, je te propose ceci
(codage à l'arrache, mes excuses par avance)
Code PHP :
<?php
<!--/*Déclaration des images*/-->
<img id="bar1_0" src="images/barres/barre0%.gif" style="border:1px solid #00011D;" alt="0%">
<img id="bar1_1" src="images/barres/barre5%.gif" style="border:1px solid #00011D;display:none;" alt="5%">
<img id="bar1_2" src="images/barres/barre10%.gif" style="border:1px solid #00011D;display:none;" alt="10%">
<!--/*etc jusqu à 100%*/-->
<!--/*On recommence avec une 2e barre*/-->
<img id="bar2_0" src="images/barres/barre0%.gif" style="border:1px solid #00011D;" alt="0%">
<img id="bar2_1" src="images/barres/barre5%.gif" style="border:1px solid #00011D;display:none;" alt="5%">
<img id="bar1_2" src="images/barres/barre10%.gif" style="border:1px solid #00011D;display:none;" alt="10%">
<!--/*etc jusqu à 100%*/-->
<!--/*Le code JS pour augmenter*/-->
<img src="images/right.gif" onclick="javascript:setBar(1)">
<!--/*Le code JS pour diminuer¨*/-->
<img src="images/left.gif" onclick="javascript:setBar(-1)">
<script type="text/javascript">
var bar_value=0;
function setBar(i) {
//Effacement des anciennes barres
document.getElementById('bar1_'+bar_value).style.display='none';
document.getElementById('bar2_'+bar_value).style.display='none';
bar_value +=i;
//on recadre les valeurs de bar_value
bar_value=Math.min(Math.max(bar_value,0),10)
//Affichage des nouvelles barres
document.getElementById('bar1_'+bar_value).style.display='block';
document.getElementById('bar2_'+bar_value).style.display='block';
}
</script>
bon encore une fois, c'est à l'arrache mais l'idée est là.
J'vous interdis pas au HS, mais attendez au moins que le problème soit réglé 