Dysfonction d'un code simple sous IE

**Rouskof** · 15/02/2013, 16h06

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

Code :

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

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 :

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

<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.

**SpaceFrog** · 15/02/2013, 16h22

Code :

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

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/

**Bovino** · 15/02/2013, 16h31

Apparemment, IE transforme les noms de couleurs en minuscules.

Code html :

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

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.

**SpaceFrog** · 15/02/2013, 16h37

suffit de faire un toLowerCase()...

http://jsfiddle.net/DTnNA/2/

**Bovino** · 15/02/2013, 16h43

Pourquoi faire ? Ca marche aussi bien sans majuscules !

http://jsfiddle.net/DTnNA/3/

**Kaamo** · 15/02/2013, 17h12

Juste en passant <tr/> => <tr>

*se barre trèèès loin*

**NoSmoking** · 15/02/2013, 18h58

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

**Rouskof** · 15/02/2013, 19h48

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 html :

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

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 :

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
<!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=''}";>
&nbsp;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 :

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

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=''}">&nbsp;coucou</td></tr></table>

Pouvez-vous m'aider s'il vous plaît ?

**Lakhdr** · 15/02/2013, 23h43

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 :

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

1
2
3
4
 
<td>
<a href="http://mapage.php" class="hoverable">lien</a>
</td>

et un bout de css :

Code :

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

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 .

**Rouskof** · 16/02/2013, 00h07

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.

**Rouskof** · 16/02/2013, 00h18

Donc je résume :

Code html :

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

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 html :

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

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.

**Lakhdr** · 16/02/2013, 00h26

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

**Rouskof** · 16/02/2013, 00h36

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 :

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

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

mais ça ne marche pas.

**Rouskof** · 16/02/2013, 01h09

Réponse trouvée via les classes CSS, en utilisant l'orthographe correcte pour leur modif en javaScript, merci NoSmoking :

Code html :

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
<!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.

**Auteur** · 16/02/2013, 10h50

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

- 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

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 html :

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

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>

**Lakhdr** · 16/02/2013, 13h20

Bonjour !
Vous dites :

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

**Rouskof** · 16/02/2013, 14h42

Merci à tous et bonne continuation !

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

**Auteur** · 16/02/2013, 15h14

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

Dysfonction d'un code simple sous IE

JavaScript

Discussions similaires

Partager

Partager