Image grandissante (jauge)

Version imprimable

13/06/2006, 19h53
rpgmax

Image grandissante (jauge)

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 :mrgreen: ).

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 ;)
13/06/2006, 20h01
Swoög

Salut ;)

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

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

Code:

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>

tu peux voir le resultat sur
http://www.recettes.genieciel.com/test5.php

LuggerHouse

13/06/2006, 21h15
rpgmax

Merci à vous deux, lugger je fais ca demain et te dis si c'est ok ;)
Par contre la page test n'a rien à voir ou c'est moi ???
13/06/2006, 21h31
luggerhouse

Citation:

Envoyé par rpgmax

Merci à vous deux, lugger je fais ca demain et te dis si c'est ok ;)
Par contre la page test n'a rien à voir ou c'est moi ???

LOL Trop drole!!
Désolé, je l'avais effacé pour aider un autre usagé LOL

Maintenant c'est revenu!!
14/06/2006, 10h49
rpgmax

Dac merci je m'occupe de ca dans la journée ;)

Ok niquel, vraiment bon rendu au final !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
var maxwith=<?php echo $percent; ?>;
var myControl=document.getElementById('jauge');
setTimeout("makeItBigger()",25);
 
function makeItBigger(){
	if (myControl.width < maxwith){
	myControl.width=myControl.width+1
	setTimeout("makeItBigger()",25);
	}
}
</script>

Merci beaucoup !