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*

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

Dysfonction d'un code simple sous IE

JavaScript

Vue hybride

Discussions similaires

Partager

Partager