Image grandissante (jauge)

**rpgmax** · 13/06/2006, 19h53

Bonsoir tout le monde,

voilà j'ai fait une jauge qu à partir d'une variable php possède un "width" différent (enfin c'est une jauge quoi

).

J'aimerais rendre la jauge plus dynamique en faisant en sorte que celle-ci commence avec un width de 0 et qui monte jusqu'à la valeur de ma variable pour ainsi avoir une progression (comme un remplissage) du style :

(attention c'est du texte ^^ et on va dire que ma variable vaut 4)

|
||
|||
||||

Comment gérer ca en javascript, j'ai chercher un peu partout mais je ne trouve pas, je ne pense pas que ce soit bien dur mais bon n'étant pas codeur javascript (on va dire juste quelques bases, en gros je saurais faire mais bon le code ne sera pas vraiment beau au final...)

Donc si vous avez une idée ou un bout de code simple (enfin pas trop lourd quoi) je suis preneur !

Merci à vous

**Swoög** · 13/06/2006, 20h01

Salut

utilise setInterval ou setTimeout et l'attribut .style.width ou .width s'il existe (je crois que le second existe pour une image

)

**luggerhouse** · 13/06/2006, 20h30

Voila le code complet pour ce que tu veux faire... Tu peux te baser la dessus si ca te plait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
      <img id="myimage" src="images/pour_le_plaisir_de_cuisiner.jpg" width="150">
 
        <script>
                var maxwith=500;
                var myControl=document.getElementById('myimage');
                setTimeout("makeItBigger()",500);//0,5 secondes
                function makeItBigger(){
                        if (myControl.width < maxwith){
                                //alert('grossir');
                                myControl.width=myControl.width+50
                                setTimeout("makeItBigger()",500);
                        }else{
                                alert('Finished');
                        }
                }
 
        </script>