OnMouseOout

Version imprimable

Bonjour,

j'ai un petit bout de code qui s'apparente à ça :
Code:

1 2 3 4 5 <input type="text" size="40" maxlength="50" name="pharma_name" onFocus='javascript:style.background="yellow"' onMouseOver='javascript:style.background="yellow"' onMouseOut='javascript:style.background="white"'> </font></td>
Probleme 1 : le onFocus ne marche pas !

Probleme 2 : une fois les evènements finis, la bordure qui était égale a 1 a disparu, dans il faut rajouter quelque part border="1" mais je ne sais pas comment !

Avez vous des idées? oO

Salut,

Et ceci ?

Code:

1
2
3
4
5
<input type="text" size="40" maxlength="50" name="pharma_name"
 onFocus='javascript:this.style.backgroundColor="yellow"'
 onMouseOver='javascript:this.style.background="yellow"' 
 onMouseOut='javascript:this.style.background="white"'
 onBlur='javascript:this.style.backgroundColor="white"'>

PS : n'utilises pas les balises FONT, utilises des feuilles de style !

21/08/2006, 17h47
denisC
Citation:

Envoyé par avogadro

Avez vous des idées? oO

mets le nom des evenements en minuscule (onfocus, onmouseout)

Remplace

Citation:

javascript:style.background="yellow"

par
Code:

1 2 this.style.background="yellow"
(on s'en doute un peu que c'est du javascript)
21/08/2006, 17h49
KiLVaiDeN

Citation:

Envoyé par denisC

mets le nom des evenements en minuscule (onfocus, onmouseout)

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+
21/08/2006, 17h53
FremyCompany

Citation:

Envoyé par KiLVaiDeN

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+

Ca ne l'est plus, mais avant ca l'était...
21/08/2006, 18h04
denisC

Citation:

Envoyé par KiLVaiDeN

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+

Non, mais les bonnes habitudes, ce n'est jamais génant :)

Si on ne voit pas d'autre solution, on peut toujours commencer par ça. Comme la casse est important en javascript (mais pas en HTML), meiux vaut avoir les bonne habitudes.

Citation:
Envoyé par KiLVaiDeN
Salut,

Et ceci ?
Code:

1 2 3 4 5 <input type="text" size="40" maxlength="50" name="pharma_name" onFocus='javascript:this.style.backgroundColor="yellow"' onMouseOver='javascript:this.style.background="yellow"' onMouseOut='javascript:this.style.background="white"' onBlur='javascript:this.style.backgroundColor="white"'>
PS : n'utilises pas les balises FONT, utilises des feuilles de style !
c'est toujours pareil pour le onFocus, je comprend pas, il ne fonctionne pas oO

Et il y a toujours le probleme sous IE, la bordure disparait, il faudrait mettre

Code:

onMouseOut='javascript:this.style.background="white";this.style.border="1"'

Mais ici la syntaxe est mauvaise!

21/08/2006, 20h03
FremyCompany

je rappelle la différence entre border et borderWidth....
... entre background et backgroundColor
... que borderWidth réclame une unité (px, pt, %, ...)
... que si le controle a le focus, et qu'ensuite on sort la souris de controle (par ex pour savoir lire la lettre sous le cuseur) la couleur de fond va changer
22/08/2006, 09h40
avogadro

Citation:

Envoyé par FremyCompany

je rappelle la différence entre border et borderWidth....
... entre background et backgroundColor
... que borderWidth réclame une unité (px, pt, %, ...)
... que si le controle a le focus, et qu'ensuite on sort la souris de controle (par ex pour savoir lire la lettre sous le cuseur) la couleur de fond va changer

pk ce rappel?

Le onFocus et interprété par FF et IE je pense, mais ça ne marche pas, ça ne vient pas d'une de mes autres fonctions d'apres moi!

exemple de rendus (avec le onMouseOn)
sous FF:
http://img166.imageshack.us/img166/8836/ffkc6.jpg

IE:
http://img90.imageshack.us/img90/5848/iefs7.gif
(bordure absente)

en gros - si j'ai un peu compris - je dirais ça:

Code:

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
<p>
<input type="text" style="border:3px solid" size="40" maxlength="50" id="t" name="pharma_name" />
</p>
 
 
 
<script type="text/javascript">
 
 
var ch=document.getElementById("t");
 
function col(){
ch.style.backgroundColor="#ffff00"
}
 
function decol(){
ch.style.backgroundColor="#ffffff"
}
 
ch.onfocus=col;
ch.onmouseover=col;
ch.onmouseout=decol;
ch.onblur=decol;
 
</script>

mais c'est lourdingue;

22/08/2006, 10h30
avogadro

oui c'est ça, mais je peux savoir pourquoi le onFocus ne marche jamais, (si c'est bien ça c'est quand je suis dans l'input texte, que j'ai cliqué dedans et que j'ai fait tab pour y acceder)
EDIT: marche que avec le tab!

Pour faire un effect de couleur qui deviens de plus en plus claire au cours du temps il suffis de mettre un interval de temps entre chaque éxécution de la fonction et de diminuer les couleurs RBJ ou comment on fait?

ca donnerais un final le fait que si l'on passe sur plusieur input text a la suite ya tout variation de couleur qui se fait progressivement, je sais pas si vous vouyez le genre d'effet!
22/08/2006, 10h52
KiLVaiDeN

Salut,

onFocus fonctionne, c'est l'inverse du onBlur, et l'évènement ne se déclenche que quand le focus est donné à l'élément.

Donc un TAB, un clic dessus ( quand un autre champs est selectionné uniquement, sinon la deuxième fois, ça ne fait que déclencher le onClick )..

Sinon, changer la couleur progressivement, le plus simple serait d'avoir un tableau des couleurs du dégradé et de le parcourir progressivement, car sinon ça risque d'être un peu plus compliqué ( mais faisable ). En cherchant un peu tu vas trouver :) A+
22/08/2006, 11h02
avogadro
pour que ça marche je pourais rajouter une petite ligne comme ça nan?
Code:

1 2 3 4 5 ch.onfocus=col; ch.onmouseover=col; ch.onmouseout=decol; ch.onblur=decol; ch.onclick=col;
22/08/2006, 11h09
javatwister

inutile...
22/08/2006, 11h37
avogadro

Citation:

Envoyé par javatwister

inutile...

bah si on clic dessus ça se color pas !

Désolé de le dire, mais c'est un petit peu agaçant les gens qui disent "ça marche pas" et qui ne cherchent pas plus loin.

Pour tester, tu m'as obligé à créer un fichier, et ça fonctionne parfaitement, comme on le pensait.
Code:

1 2 3 4 5 6 7 8 9 <html> <body> <form name="testForm" id="testForm" method="POST"> <input type="text" name="test" id="test" onFocus="document.getElementById('test').style.backgroundColor='yellow'" onBlur="document.getElementById('test').style.backgroundColor='white'"> </form> </body> </html>

22/08/2006, 11h53
avogadro

abusé, j'avais fait la même chose :s
enfin bref tempis !
22/03/2010, 11h05
otyg5937
le plus simple est quand même d'appeler une classe CSS via le java script, ainsi on peut mettre ce que l'on veut sans restriction
par exemple :

Code:

<input type="text" name="test" id="test" onFocus="javascript:this.className='MouseOver'" onBlur="javascript:this.className='MouseOut'" />

et les classes CSS correspondantes :
Code:

1 2 3 4 .MouseOver {border:1px solid red} .MouseOut {border:1px solid yellow} /* je rajoute un outline : none à l'input pour virer le filet disgracieux à la sélection */ input {outline : none}

Fuseau horaire GMT +2. Il est actuellement 16h22.