Barre de recherches

[Roworll]

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>