Evenement sous IE

**Kel-T** · 03/09/2011, 09h29

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 :

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

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.

**Eric2a** · 03/09/2011, 10h07

Salut,

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

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

**Kel-T** · 03/09/2011, 10h38

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 :

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

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 :

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

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.

**Eric2a** · 03/09/2011, 10h58

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

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

**Auteur** · 03/09/2011, 11h04

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

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

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

puis :

Code html :

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

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()

[edit]
grillé par Eric2a

[/edit]

**Kel-T** · 03/09/2011, 14h39

Ca marche merci.

Evenement sous IE

JavaScript

Discussions similaires

Partager

Partager