Bonjour,
voilà j'utilise la librairie mootools pour mon menu, et faire un effet "smooth" à l'aide de Fx.Styles.
Alors après un bon nombre de soucis, tout marchait impeccable sous Mozilla firefox. Et là c'est le drame, je m'aperçois que mon menu ne marche plus sous IE (7) ! Donc je vais voir la démo sur le site officiel mootools voir si c'était bien compatible, et oui.
Donc le problème vient bien de moi.
IE signale donc un problème (une erreur existe sur la page, logo jaune en bas à gauche).
Je ne vois vraiment pas ce qui cloche, je laisse le code de ma page principale, ainsi que mon fichier load.js qui contient la fonction pour le menu. Je dispense le fichier mootools.js qui est énorme. Voici le lien si vous voulez le CSS ou autre, mais je doute que ça vienne de là (mais bien du côté javascript):
http://lemoineaudamien.free.fr/galeries-dach/
index.php :
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeries Dach</title>
<link rel="stylesheet" type="text/css" media="all" href="fichiers/style/style.css" />
<script type="text/javascript" src="fichiers/js/mootools.js"></script>
<script type="text/javascript" src="fichiers/js/load.js"></script>
<!--[if gte IE 5]>
<style>
@import url("fichiers/style/ie.css");
</style>
<![endif]-->
</head>
<body>
<div id="conteneur">
<div id="titre"><img src="images/dach-titre.png" width="253" height="75" alt="Galeries Dach" /></div>
<div id="galerie">
<div id="conteneurmenu">
<!-- Affichage du menu dynamique !-->
<ul id="ssmenu">
<li><div onclick="javascript:location.href='index.php?rub=10';">Mayotte</div></li>
<li><div onclick="javascript:location.href='index.php?rub=4';">Citroën C3 HDI Pulp</div></li>
<li><div onclick="javascript:location.href='index.php?rub=3';">Linux bureau 3D</div></li>
<li><div onclick="javascript:location.href='index.php?rub=2';">Maison de Capbreton</div></li>
<li><div onclick="javascript:location.href='index.php?rub=1';">Pussy cat</div></li>
</ul>
<!-- Fin affichage du menu !-->
<div style="padding-top:10px;">
<p><img src="images/photo_moment.jpg" width="200" height="171" border="0" alt="Fleurs Capbreton" /><br />
<span class="grisClair onze" style="margin-left:10px;">Fleurs by <a href="mailto:juli1_h@hotmail.fr" class="grisClair link onze">Julien</a>.</span></p>
</div>
<div id="logosValid"></div>
</div>
<div id="vignettes">
<div style="text-align:right;padding-bottom:25px;padding-right:5px;height:20px;" class="quinze grisFonce">Mayotte, 2007</div>
<!-- Affichage des vignettes !-->
<div class="thumb">
<a href="index.php?rub=10&img=1"><img src="images/galeries/mayotte/thumb/dsc00862.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
<a href="index.php?rub=10&img=2"><img src="images/galeries/mayotte/thumb/dsc00883.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
...
<div class="thumb">
<a href="index.php?rub=10&img=7"><img src="images/galeries/mayotte/thumb/p1000420.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
<a href="index.php?rub=10&img=8"><img src="images/galeries/mayotte/thumb/p1000449.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
<a href="index.php?rub=10&img=9"><img src="images/galeries/mayotte/thumb/p1000451.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
<a href="index.php?rub=10&img=10"><img src="images/galeries/mayotte/thumb/p1000884.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<!-- Fin affichage des vignettes !-->
</div>
</div>
</div>
<div id="footer">
<div id="bandeaubas" class="onze grisClair">
<div style="float:left;">
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="images/xhtml.gif" alt="xhtml" height="15" width="80" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="images/css.gif" alt="css" height="15" width="80" border="0" /></a>
<a href="http://www.mozilla-europe.org/fr/products/firefox/" target="_blank"><img src="images/getfirefox.gif" alt="firefox" border="0" /></a> </div>
<div style="float:right;">
Powered by <a href="http://www.dach-production.com/" target="_blank" class="onze grisClair link">Dach-Production</a>
</div>
</div>
</div>
</body>
</html> |
load.js :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| window.onload = function(){
// liste du menu
var list = $$('#ssmenu li div');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'padding-left': 5,
'background-color': '#F5F5F5',
'color': '#333333',
});
});
element.addEvent('mouseleave', function(){
fx.start({
'padding-left': 0,
'background-color': '#FFFFFF',
'color': '#666666',
});
});
});
}; |
Merci d'avance !
26/05/2007, 21h53
Mootools Fx.Styles IE
00
