IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

D�grad� progressif sur input text


Sujet :

JavaScript

  1. #1
    Membre �clair� Avatar de avogadro
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    412
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 412
    Par d�faut D�grad� progressif sur input text
    Bonjour,

    j'ai fait une petite page qui permet de faire des effets de d�grad� progressif au passage de la souris sur des input text, a la fon�on de enlightenement ou sur certain menu que l'on trouve sur le web!

    Mon probleme est que quand il y a un input text �a marche niquel, mais quand il y en a plusieur (comme sur l'exemple que je vais vous donner), �a ne marche pas car quand on passe la l'input suivant, la valeur qui sert au changement de couleur se trouve elle meme modifi�e...

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='col(this);' 
    onMouseOut='degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var numero;
    var quelle_ligne;
     
     
    function col(obj){
    obj.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj){
     
    	// Initialisation
    	numero = 1;
    	quelle_ligne = obj;
     
    	setTimeout("saoupas()",80);		 
    }
     
    function saoupas(){
    	switch (numero)
    	{
    	  case 1:		
    		quelle_ligne.style.backgroundColor = "#ffff00";		
    		setTimeout("saoupas()",80);		 
    		//alert('couleur 1');
    	   break;
     
    	  case 2:
    		quelle_ligne.style.backgroundColor = "#FFFF6B";	
    		setTimeout("saoupas()",80);		 
    		//alert('couleur 2');	
    		break;
     
    	  case 3:
    		quelle_ligne.style.backgroundColor = "#FFFF93"; 
    		setTimeout("saoupas()",80);		 
    		//alert('couleur 3');		
    		break;
     
    	  case 4:
    		quelle_ligne.style.backgroundColor = "#FFFFBB";	
    		setTimeout("saoupas()",80);		 
    		//alert('couleur 4');	
    		break;		
     
    	  case 5:
    		quelle_ligne.style.backgroundColor = "#ffffff";	
    		//alert('couleur 5');	
    		break;	
    	}
    	numero++;
    }
    </script>
    </body>
    </html>
    Il y aurait la possibilit� de faire un Objet javascript mais c'est du javascript "hardcore", si quelqu'un a une autre m�thode pour parvenir au r�sultat

    Merci...

  2. #2
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    en gros il est perdu car la variable numero est commune � tous ...
    ainsi que l'instanciation su settimeout

    j'ai modifi� un peu le script pour utiliser un setinterval plus rationnel et pour attribuer � chaque textbox une instanciation � la fois du setInterval et donc du clearInterval, mais aussi de l'incr�ment du num�ro ...

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver=' new col(this);' 
    onMouseOut=' degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
     
     
    function col(obj1){
    obj1.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj2){
    if (!obj2.level){obj2.level=0;}
    obj2.level++
     
     
        obj2.run=(setInterval( function(){ saoupas(obj2)},80))
       }
     
     
    function saoupas(obj3){
    	obj3.style.backgroundColor=degarray[obj3.level]
    	obj3.level++;
    		if (obj3.level>4){clearTimeout(obj3.run);
    					obj3.level=0
    	             	              }
     
     
    }
    </script>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  3. #3
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    et voici qui b=vient corriger le bug de deux onmouseover successif trop rapproch�s ... :

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver=' new col(this);' 
    onMouseOut=' degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
     
     
    function col(obj1){
    obj1.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj2){
    if (!obj2.level){obj2.level=0;}
    obj2.level++
     
     
        obj2.run=(setInterval( function(){ saoupas(obj2)},80))
       }
     
     
    function saoupas(obj3){
    	obj3.style.backgroundColor=degarray[obj3.level]
    	obj3.level++;
    		if (obj3.level>4){clearTimeout(obj3.run);
    					obj3.level=0
    	             	              }
     
     
    }
    </script>
    </body>
    </html>
    si il y a deja un setTimeout qui courre sur la zone, il faut le vider et r�initialiser le level ...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  4. #4
    Expert confirm�
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Ao�t 2003
    Messages
    3 684
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activit� : danseur

    Informations forums :
    Inscription : Ao�t 2003
    Messages : 3 684
    Par d�faut
    copi�-coll� d'un bout de code que j'avais mis sur EJS:

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <script type="text/javascript"> 
     
    ////////////////////////////////////
    // SCRIPT A PLACER EN FIN DE BODY //
    ////////////////////////////////////
     
    var couleur;
    var b=0;var c=255;d=100;
    var obj;
     
    function on(e){
    if(!obj){obj=window.Event ? e.target : event.srcElement};
     
    couleur="rgb("+b+","+c+","+d+")";
     
    if(b<=245){b+=10}
    else if(b>245 && c>10){c-=10}
    else if(d>0){d-=10}
     
    obj.style.color=couleur;
     
    un=setTimeout("on()",10)
    }
     
    function off(){
    clearTimeout(un);
    obj=false;
     
    b=0;c=255;d=100;
     
    this.style.color='000000'
    }
     
    var liens=document.links;
    for(i=0;i<liens.length;i++){
    liens[i].onmouseover=on;
    liens[i].onmouseout=off;
    }
    </script>
    et lien perso :http://javatwist.imingo.net/decolo.php

  5. #5
    Membre �clair� Avatar de avogadro
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    412
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 412
    Par d�faut
    Citation Envoy� par SpaceFrog
    et voici qui b=vient corriger le bug de deux onmouseover successif trop rapproch�s ... :

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver=' new col(this);' 
    onMouseOut=' degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
     
     
    function col(obj1){
    obj1.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj2){
    if (!obj2.level){obj2.level=0;}
    obj2.level++
     
     
        obj2.run=(setInterval( function(){ saoupas(obj2)},80))
       }
     
     
    function saoupas(obj3){
    	obj3.style.backgroundColor=degarray[obj3.level]
    	obj3.level++;
    		if (obj3.level>4){clearTimeout(obj3.run);
    					obj3.level=0
    	             	              }
     
     
    }
    </script>
    </body>
    </html>
    si il y a deja un setTimeout qui courre sur la zone, il faut le vider et r�initialiser le level ...

    oui ok �a marche pas mal, je vais juste le modifier pour que la couleur s'arrete au blanc et ne fasse pas la boucle ind�finiment !

    EDIT: en fait il doit y avoir des bug a cause du onMouseOver parce �a doit etre vraiment bien plac� au dessus pour que �a marche, une solution serait peu etre d'enlever cet �v�nement je sais pas !

  6. #6
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    ??? ben chez moi �a s'arrete au blanc ...

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver=' new col(this);' 
    onMouseOut='new degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut='new  degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='new col(this);' 
    onMouseOut='new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
     
     
    function col(obj1){
    if (obj1.run){clearTimeout(obj1.run);
                  obj1.level=0;}
    obj1.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj2){
    if (!obj2.level){obj2.level=0;}
    obj2.level++
     
     
        obj2.run=(setInterval( function(){ saoupas(obj2)},200))
       }
     
     
    function saoupas(obj3){
    	obj3.style.backgroundColor=degarray[obj3.level]
    	obj3.level++;
    		if (obj3.level>4){clearTimeout(obj3.run);
    					obj3.level=0
    	             	              }
     
     
    }
    </script>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  7. #7
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    un petit up pour dire que j'ai du me gourer dans le copier coller pr�c�dent...
    le code du post ci dessus fonctionne test� avec IE et ffx
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  8. #8
    Membre �clair� Avatar de avogadro
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    412
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 412
    Par d�faut
    parfais cest niquel la !

    Merci, je vais changer deux trois truc mais en gros c'est bon :p

  9. #9
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    Petit correctif, car mon code ne prenait pas en compte la premi�re couleur de l'array ...

    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <html>
     
    <head>
     
    </head>
     
    <body>
    <!--
    <br/><br/>
    tableau des couleurs:
    <table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
    <tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
    <tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
    <tr><td BGCOLOR="#FFFF93">color 3</td></tr>
    <tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
    <tr><td BGCOLOR="#ffffff">color 5</td></tr>
    </table>
     
    <br/><br/>
    -->
     
    <p>
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver=' new col(this);' 
    onMouseOut='new degrade(this);'   
    id="un" name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut='new  degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" 
    maxlength="50" onMouseOver='new col(this);' 
    onMouseOut='new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' new degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    <input type="text" style="border:1px solid" size="40" maxlength="50" 
    onMouseOver='new col(this);' 
    onMouseOut=' degrade(this);'   
    name="pharma_name" />
    <br/><br/>
     
    </p>
     
     
    <script type="text/javascript">
    var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
     
     
    function col(obj1){
    if (obj1.run){clearTimeout(obj1.run);
                  obj1.level=0;}
    obj1.style.backgroundColor="#ffff00"
    }
     
    function degrade(obj2){
    if (!obj2.level){obj2.level=0;}
    obj2.level++
     
     
        obj2.run=(setInterval( function(){ saoupas(obj2)},80))
       }
     
     
    function saoupas(obj3){
    	obj3.style.backgroundColor=degarray[obj3.level-1]
    	obj3.level++;
    		if (obj3.level>degarray.lenght){clearTimeout(obj3.run);
    					obj3.level=0
    	             	              }
     
     
    }
    </script>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. [D�butant] ev�nement onChange sur input text
    Par jacquesprogram dans le forum G�n�ral JavaScript
    R�ponses: 6
    Dernier message: 09/12/2009, 12h16
  2. evenement sur input text
    Par lesafir dans le forum G�n�ral JavaScript
    R�ponses: 3
    Dernier message: 14/08/2007, 12h01
  3. click sur une image - affichage <INPUT TEXT
    Par bilou95 dans le forum G�n�ral JavaScript
    R�ponses: 6
    Dernier message: 21/05/2007, 11h13
  4. R�ponses: 1
    Dernier message: 06/10/2006, 12h50
  5. focus sur une input text
    Par mic79 dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 05/01/2005, 18h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo