Dysfonction d'un code simple sous IE

Version imprimable

Bonjour,
Quelqu'un peut me dire pourquoi cette ligne de code javascript fonctionne sous Firefox et Chrome, mais pas sous IE ?
Code:

1 2 3 4 <td bgcolor="GreenYellow" onMouseOver="if(this.bgColor=='GreenYellow'){this.bgColor='Yellow'}" onMouseOut="if(this.bgColor=='Yellow'){this.bgColor='GreenYellow'}" onClick="if(this.bgColor=='Yellow'){this.bgColor='Orange';form_resa.date15.value='15'}else{this.bgColor='GreenYellow';form_resa.date15.value=''}" style="cursor:pointer">
Pb : La cellule <td>ne change pas de couleur OnMouseOver et OnClick et j'ignore si la modif du champs invisible se passe bien :

"Date15" est l'ID d'un champs "hidden" du formulaire "form_resa" :

Code:

<input type="hidden" name="date[]" value="" id="date15">

Y aura-t-il d'autres navigateurs avec lesquels ce code ne fonctionnera pas, nottamment la modif du champs invisible du formulaire, qui est cruciale ? (Iphone, Androïd...?)

Je ne suis pas du tout familier de JavaScript et ne l'utilise en général pas.
Merci.

Code:

1
2
3
<td style="background-color:GreenYellow" 
onMouseOver="if(this.style.backgroundColor=='GreenYellow'){this.style.backgroundColorr='Yellow'}" 
onMouseOut="if(this.style.backgroundColor=='Yellow'){this.style.backgroundColor='GreenYellow'}"

http://jsfiddle.net/DTnNA/

Apparemment, IE transforme les noms de couleurs en minuscules.
Code:

1 2 3 <td style="background-color:greenyellow" onMouseOver="if(this.style.backgroundColor=='greenyellow'){this.style.backgroundColorr='yellow'}" onMouseOut="if(this.style.backgroundColor=='yellow'){this.style.backgroundColor='greenyellow'}">
Ceci dit, il est plutôt conseillé de passer par des couleurs hexa (#RRVVBB) que des couleurs nommées.

15/02/2013, 16h37
SpaceFrog

suffit de faire un toLowerCase()...

http://jsfiddle.net/DTnNA/2/
15/02/2013, 16h43
Bovino

Pourquoi faire ? Ca marche aussi bien sans majuscules ! :mrgreen:
http://jsfiddle.net/DTnNA/3/
15/02/2013, 17h12
Kaamo

Juste en passant <tr/> => <tr>
:toutcasse: *se barre trèèès loin* :mrgreen: :dehors:
15/02/2013, 18h58
NoSmoking

Bonjour,
méthode maladroite, pourquoi ne pas affecter une class avec le pseudo élément :hover, une garantie de bon fonctionnement.

Il me semble également que IE retournera une valeur au format #AABBCC

Bravo les gars, ça marche maintenant dans IE ! Sauf que vous savez quoi ? Ca ne marche plus dans Chrome !!!

Sinon, pour info, ce code fonctionne dans IE :
Code:

1 2 3 4 5 <td rowspan="5" align="center" valign="top" bgcolor="GreenYellow" onMouseOver="this.bgcolor='Yellow'" onMouseOut="this.bgcolor='GreenYellow'" onClick="location.href='/resa.php?activite=cours&date[0]=3&lg=fr'" style="cursor:pointer">
Donc apparemment le tag td bgcolor est compris par IE et peut être modifié. Ce serait plutôt les if qui poseraient problème...

Pour ce qui est d'utiliser :hover, j'ai essayé et ça ne marche pas : ma cellule ne devient pas orange quand je clique dessus. Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html><html> <head> <style> td.horaire{ cursor:pointer; background-Color:greenyellow; } td.horaire:hover{ cursor:pointer; background-Color:yellow; } </style> </head> <body> <form name="form_resa" method="post" action="resultat.php" <input name="date[]" type="text" value="" id="date15"> </form> <table><tr> <td class="horaire" onClick=if(this.style.backgroundColor=='yellow'){this.style.backgroundColor='orange'; form_resa.date15.value='15'}else{this.style.backgroundColor='greenyellow';form_resa.date15.value=''}";>  coucou</td></tr></table></body></html>
Je précise que je veux que la cellule vert-jaune devienne jaune quand je passe dessus et orange quand je clique dessus (tout en modifiant le formulaire), puis à nouveau vert-jaune si je reclique dessus alors qu'elle est orange. Il ne s'agit pas que d'un simple "hover" !

Enfin, voici un essai où j'ai remplacé les noms de couleurs par les codes #RRVVBB, et rien ne marche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <form name="form_resa" method="post" action="resultat.php" <input name="date[]" type="text" value="" id="date15"> </form> <table><tr> <td style="background-color:#ADFF2F; cursor:pointer" onMouseOver="if(this.style.backgroundColor=='#ADFF2F') { this.style.backgroundColor='#FFFF00' }" onMouseOut="if(this.style.backgroundColor=='#FFFF00') { this.style.backgroundColor='#ADFF2F' }" onClick="if(this.style.backgroundColor=='#FFFF00'){this.style.backgroundColor='#FFA500'; form_resa.date15.value='15'}else{this.style.backgroundColor='#ADFF2F';form_resa.date15.value=''}"> coucou</td></tr></table>
Pouvez-vous m'aider s'il vous plaît ?

15/02/2013, 23h43
Lakhdr
bonsoir !

Vous utilisez de l HTML ancien bgColor et les evenements sur tag c est de l ancien version HTML
Dans ce cas faite attention au DOCTYPE de votre page car si vous ne declarez pas de DOCTYPE dan votre page IE part en quirk en quoi il fait ce qu il veut

pour le hover sur un <td> c est de l HTML 5 css3 je crois ! ca doit pas marcher sur IE ancien

je vous propose une solution :

si vous voulez ecrire les ancien HTML
1 trouver le DOCTYPE qui vous convient et inserer le au debut de la page !!
apres pour avoir directement l effet hover et clic ajouter la balise a dans le TD comme ca :
Code:

1 2 3 4 <td> <a href="http://mapage.php" class="hoverable">lien</a> </td>
et un bout de css :
Code:

1 2 3 4 5 6 7 8 a.hoverable{ display:block;margin:0; background:greenyellow; } a.hoverable:hover{ background:yellow; }
avec ca vous avez l effet du hover car le <a> couvre la cellule . le clic avc le href .
16/02/2013, 00h07
Rouskof

J'ai déjà fait l'essai avec le :hover (voir mon post juste au-dessus). On peut le faire directement sur .td
Le problème est que tant qu'il s'agit de ne faire qu'un changement de couleur lors d'un :hover ça va, mais je veux aussi pouvoir cliquer sur cette cellule, et que la couleur change (orange) et reste, où que se trouve le curseur, sauf si on reclique dessus, auquel cas, elle retrouve sa couleur vert-jaune initiale.

Donc je résume :
Code:

1 2 3 4 <td bgcolor="GreenYellow" onMouseOver="if(this.bgColor=='GreenYellow'){this.bgColor='Yellow'}" onMouseOut="if(this.bgColor=='Yellow'){this.bgColor='GreenYellow'}" onClick="if(this.bgColor=='Yellow'){this.bgColor='Orange';form_resa.date15.value='15'}else{this.bgColor='GreenYellow';form_resa.date15.value=''}" style="cursor:pointer">
Marche dans Chrome, Firefox, mais pas dans IE.
Code:

1 2 3 4 <td style="background-color:GreenYellow; cursor:pointer" onMouseOver="if(this.style.backgroundColor=='GreenYellow'){this.style.backgroundColorr='Yellow'}" onMouseOut="if(this.style.backgroundColor=='Yellow'){this.style.backgroundColor='GreenYellow'}" onClick="if(this.style.backgroundColor=='Yellow'){this.style.backgroundColor='Orange';form_resa.date15.value='15'}else{this.style.backgroundColor='GreenYellow';form_resa.date15.value=''}">
Marche dans IE, Firefox, mais pas dans Chrome.

Et j'ai pas encore essayé Safari...

Quelqu'un a une idée ?
Les essais sans majuscules et avec noms de couleurs hexadécimaux n'ont pas été concluants. Si vous trouvez d'où vient le problème de ma version avec les codes hexadécimaux (plus haut), ça pourra peut-être aider, car rien ne fonctionne dans cette version, il doit y avoir une faute évidente.

16/02/2013, 00h26
Lakhdr

pardon ! j ai peut etre pas compris votre besoin!

mais le hover sur un td c est pas de l html 4

apres votre DOCTYPE est HTML 5 cela suppose que vous ciblez les navigateurs recents pas IE<9

ensuite si vous voulez rester sur de l html 4 Sur le balise <a> vous avez le hover le visited et active
donc qnd vous cliquer sur la cellule ca passe à .a;active

si vous avez pas de reponse d ici demain je vous enverrai une solution complete
16/02/2013, 00h36
Rouskof

je ne sais pas ce qu'il en est exactement des versions de navigateurs (j'ai IE8), mais le :hover que j'ai fait sur .td fonctionnait.
Le problème, c'est que ça ne permet de faire qu'un hover, et moi je veux que quand je clique dessus, la couleur de la cellule change et reste ainsi.
Le :active ne fait que changer la couleur quand on clique pendant une fraction de seconde, ça ne reste pas.
Et de toute façon, ensuite il faut aussi que je puisse "décliquer" la cellule pour la faire revenir à sa couleur initiale. Je ne vois pas comment je peux faire ça avec des :hover et des :active. J'ai essayé de définir différentes class pour td et de passer de l'une à l'autre avec un code JavaScript du style :

Code:

onClick="if (this.backgroundColor==greenyellow){this.class='orange'}else{this.class='vertjaune'}

mais ça ne marche pas.

Réponse trouvée via les classes CSS, en utilisant l'orthographe correcte pour leur modif en javaScript, merci NoSmoking :
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 26 27 28 29 30 31 32 33 34 35 36 37 <!DOCTYPE html><html> <head> <style> td.horaire{ cursor:pointer; /*background-Color:#ADFF2F;*/ background-Color:GreenYellow; } td.horaire:hover{ cursor:pointer; /*background-Color:#FFFF00;*/ background-Color:Yellow; } td.horairesel{ cursor:pointer; /*background-Color:#FFA500;*/ background-Color:Orange; } </style> <? $id_cours = 15; ?> </head> <body> <form name="form_resa" method="post" action="resultat.php"> <input name="date[]" type="text" value="" id="date15"> </form> <table><tr> <td class="horaire" <? echo " onClick=\""; echo "if(this.className=='horaire'){this.className='horairesel'; form_resa.date".$id_cours.".value='".$id_cours."'} else{ this.className='horaire';form_resa.date".$id_cours.".value=''}"; echo "\""; ?>>class hexa</td>
Marche aussi bien avec les codes de couleurs hexadécimaux que les noms de couleurs, pour IE 8, Chrome, FireFox et Safari.

Dernière question : est-ce qu'un type d'un pays en voie de développement avec un PC un peu ancien peut faire échouer ce script à cause du :hover sur la balise td ?

Je vois que si je change
<!DOCTYPE html>
pour :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
IE8 ne fait pas le changement de couleur en :hover, mais change tout de même la class quand on clique (la cellule passe en orange) et la valeur dans le formulaire, ce qui est l'essentiel, le changement de couleur en :hover étant simplement un effet déco.

Le :hover fonctionne dans les autres navigateurs.

Bonjour,

plusieurs remarques sur les codes postés dans cette discussion. Les majuscules c'est bien joli mais cela peut aussi poser quelques problèmes au niveau de l'interprétation ou de la validation W3C :mrgreen:

- en HTML
onMouseOver => onmouseover
onMouseOut => onmouseout
onClick => onclick

- en CSS
background-Color => background-color

par contre pour le style en ligne c'est bien backgroundColor :aie:

Citation:

Dernière question : est-ce qu'un type d'un pays en voie de développement avec un PC un peu ancien peut faire échouer ce script à cause du :hover sur la balise td ?

Le pays n'a rien à voir avec la balise :hover c'est la version du navigateur. Avec d'anciennes versions du navigateur IE (<=6, si je ne me trompe pas) et les premières versions de Firefox la pseudo-classe :hover n'était reconnue que sur les balises <a>, les effets hover sur les autres balises étaient réalisées avec du code javascript.

Exemple :
Code:

1 2 3 4 5 6 7 8 <table> <tr> <td onmouseover="this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF'" onmouseout="this.style.backgroundColor='';this.style.color='#000000'"> bonjour tout le monde !! </td> </tr> </table>

16/02/2013, 13h20
Lakhdr

Bonjour !
Vous dites :

Citation:

est-ce qu'un type d'un pays en voie de développement avec un PC un peu ancien peut faire échouer ce script à cause du :hover sur la balise td ?

J'espere que c est pas pour moi que vous dites ça ?
Je vous ai rien fait monsieur , j'ai simplement essaye de vous donner mon avis et de vous aider au pire !
Ce site est pour echange d 'informations et non pas pour echange d insultes .
Je suis bien dans un pays pas en voie de développement seulement , mais sous développé et pauvre si cela puisse flatter votre ego .
Et que ca puisse vous rassurer , Mon ecole est sponsorisée par l'université du Massachusetts ,et j ai acces au moyens les plus ultras
Enfin je vous trouve stupide et j espere que les gens de ce site ne vont pas tolerer votre comportement
16/02/2013, 14h42
Rouskof

Merci à tous et bonne continuation !

(Loin de moi l'espoir de viser la validation W3C : ))
16/02/2013, 15h14
Auteur

Citation:

Envoyé par Rouskof

(Loin de moi l'espoir de viser la validation W3C : ))

Si il faut la viser : cette validation de ton code HTML par le W3C garantie que ton code est correct au niveau des balises, qu'il respecte certaines normes et que ta page fonctionnera normalement sur tous les navigateurs.
Le site : http://www.w3.org/
La validateur (X)HTML : http://validator.w3.org/ et ça ne fait pas de mal ;)