Barre de recherches

[Valter]

Bonjour, j'aimerais créer une barre de recherche ou chaque click fais avancer la barre, seulement :
Tu sais que ton quartier craint quand un sourd-muet vient te voir pour te faire signer une pétition pour les sourds-muets. Pétition que tu signes sans grande émotion, et encore moins lorsque, au moment de partir, le sourd-muet en question se retourne quand il entend ton chien aboyer

[Sephi-Chan]

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

[Valter]

En effet.

[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

[Sephi-Chan]

Moi j'espère que tu changeras ou que tu te casseras.

[Plume]

Hors Sujet messieurs J'vous interdis pas au HS, mais attendez au moins que le problème soit réglé

[appzer0]

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:

[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> 

[X-ZoD]

mais si c'est la meme couleur de barre pourquoi vous ne faites pas jouer sur l'attribut width du style d'une seule image ? -_-

[jo_link_noir]

même avec une barre complexe et un peu de css ça doit être possible en "cachant" la barre. Il suffirais alors juste de déplacer vers la droite ou la gauche la barre pour la faire apparaitre.