Bonjour,

Débutant en AJAX, j'essaye d'utiliser Mouseenter avec Mootools 1.2

Le code suivant fonctionne très bien sur FF (augmentation de la taille de la boite noire), mais pas sur IE.

Qui a une idée ?

Merci d'avance.

index.php :
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
 
<!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-FR">
    <head>
	    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
 
        <link rel="stylesheet" type="text/css" href="Js/mootools/Mouseenter/Mouseenter.css" />
        <script type="text/javascript" src="Js/mootools/mootools.js"></script>
        <script type="text/javascript" src="Js/mootools/Mouseenter/Mouseenter.js"></script>
    </head>
    <body>
        <div id="myOtherElement1"></div>
        <div id="myOtherElement" style="width:300px;height:100px;border: 2px solid #ff0000" ></div>
    </body>
</html>
Mouseenter.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
window.addEvent('domready', function(){
    var x=document.getElementById('myOtherElement1');
	$('myOtherElement').addEvents({
        'mouseenter':function(){
            x.set('tween',{duration: 1000,transition: Fx.Transitions.Bounce.easeOut}).tween('width', '200px');
        },
		'mouseleave':function(){
            x.set('tween', {}).tween('width', '20px');
        }
	});
});

Mouseenter.css
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
 
#myOtherElement2 {
	position:absolute;
	margin-top:0px;
	margin-left:0px;
}
 
#myOtherElement {
	position:absolute;
	margin-top:0px;
	margin-left:0px;
}
div#myOtherElement1 {
	width: 20px;
	height: 100px;
	border: 1px solid #000000;
	position:absolute;
	margin-top:0px;
}
 
div#myOtherElement1 span, div#myOtherElement1 a {
	display: block;
}