Evenement sous IE

Version imprimable

Evenement sous IE

Bonjour,

Je fais un site, et j'ai encore des problèmes de compatibilités avec mon tendre aimé Internet Explorer. Voici le code :
Code:

1 2 3 4 5 6 <span onmouseover="document.getElementById('id2').setAttribute('style', 'visibility: hidden;');" onmouseout="document.getElementById('id2').setAttribute('style', 'visibility: visible;');"> Texte </span> <div id="id2"> Phrase dynamique </div>
Le but étant qu'au survol de "Texte" la phrase disparaisse, je n'utilise pas style.visible = "" du JS car j'ai simplifié ; d'autres propriétés CSS sont utilisées.
Ce code marche bien sous Firefox et Chrome mais pas sous IE pourtant le JS est bien activé, un onclick="alert('test');" fonctionne.

Merci d'avance :)

PS : La variable PHP $_SERVER['HTTP_USER_AGENT'] me renvoie MSIE 8.0.

Salut,

Si on déclare le type de document (x)HTML, ça fonctionne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Essai</title>
	</head>
	<body>
		<span onmouseover="document.getElementById('id2').setAttribute('style', 'visibility: hidden;');" onmouseout=" document.getElementById('id2').setAttribute('style', 'visibility: visible;');">
			Texte
		</span>
		<div id="id2">
			Phrase dynamique
		</div>
	</body>
</html>

03/09/2011, 10h38
Kel-T

En effet merci. Sur le site j'ai bien déclaré le DOCTYPE par contre, mais je viens d'identifier le problème.

- Au survol j'annule du CSS qui a été affecté dans un fichier CSS lié.

Code:

onmouseover="document.getElementById('nom_id').setAttribute('style', 'background: none; border: none; visibility: hidden;');"

- Quand la souris sort, je voudrais effacer le style, de sorte à ce que le CSS du fichier à part soit à nouveau affecté.

Code:

onmouseout="document.getElementById('nom_id').setAttribute('style', '');"

Seulement sous IE, j'ai l'impression qu'au lieu d'écraser la valeur de style et avoir style="", il l'ajoute à la valeur précédente du style="border: none...", ce qui fait que le onmouseout ne marche pas.
Existe-t-il une fonction comme setAttribute mais qui supprimerait l'attribut style ?
Merci.

Je pense que l'idéal est de travailler avec les classes CSS.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Essai</title>
		<style type="text/css" media="screen">
			.visible{
				background-color:#ccc;border:1px #ccc solid;visibility:visible
			}
			.hidden {
				background:none;border:none;visibility:hidden
			}
		</style>
	</head>
	<body>
		<span id="id1">Texte</span>
 
		<div id="id2" class="visible">
			Phrase dynamique
		</div>
 
		<script type="text/javascript">
                        var elt=document.getElementById('id1');
                        elt.onmouseover=function(){document.getElementById('id2').className='hidden';}
                        elt.onmouseout=function(){document.getElementById('id2').className='visible';}
                </script>
	</body>
</html>

03/09/2011, 11h04
Auteur
bonjour,

pourquoi ne pas faire plus simple ? Tu crées en CSS deux classes : la première qui contient les attributs que tu veux appliquer lorsque la souris est sur l'élément et la seconde lorsque la souris sort de l'élément.
Code:

1 2 3 4 5 6 7 8 9 10 .mouseOver{ background: none; border: none; visibility: hidden; } .mouseOut{ visibility: visible; };
puis :
Code:

1 2 3 onmouseover="document.getElementById('nom_id').className='mouseOver'" onmouseout="document.getElementById('nom_id').className='mouseOut'"
cela évitera aussi de t'emm**** avec cette fonction setAttribute() :aie:

[edit]
grillé par Eric2a :cry:
[/edit]
03/09/2011, 14h39
Kel-T

Ca marche merci.