ChangeImage ne marche pas sous Internet Explorer
Bonjour,
J'ai un menu déroulant avec changement d'images quand la souris passe sur le bouton. Tout se passe très bien sur Mozilla mais pas sur Internet Explorer. Je ne sais pas si c'est une incompatibilité javascript Ie, ou si ça a avoir avec les css, les hover et les behaviors.
Je vous envoie les codes, en espérant que je l'ai posté au bon endroit.
Fonction ChangeImages:
Code:
1 2 3 4 5 6 7
| function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
} |
HTML:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <ul id="menuDeroulant">
<li>
<a href="#"
onmouseover="changeImages('interface2_12', 'images/interface2_12-over.png'); return true;"
onmouseout="changeImages('interface2_12', 'images/interface2_12.png'); return true;"
onmousedown="changeImages('interface2_12', 'images/interface2_12.png'); return true;"
onmouseup="changeImages('interface2_12', 'images/interface2_12-over.png'); return true;">
<img name="interface2_12" src="images/interface2_12.png" width="129" height="47" border="0" alt=""></a>
<ul class="sousMenu">
<li><a href="article.php?cat=3">Historique</a></li>
<li><a href="article.php?cat=4">Organisation</a></li>
<li><a href="article.php?cat=5">Missions et objectifs</a></li>
<li><a href="article.php?cat=6">Contact</a></li>
</ul>
</li>
</ul> |
le css correspondant :
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
|
<style type="text/css">
body {
background-image:url(images/1024.png);
Background-attachment: fixed;
background-position: center center;
behavior:url("htc/csshover3.htc");
}
img, div, a, input { behavior: url(htc/iepngfix/iepngfix.htc) }
a:link {
color: #006600;
font-weight: bold;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #006600;
}
a:hover {
text-decoration: underline;
color: #FF6600;
}
a:active {
text-decoration: none;
color: #FFFF00;
}
input {
border:1px solid black;
background-color:#153f00;
font-family:"arial";
color:white;
}
select {
border:1px solid black;
background-color:#153f00;
font-family:"arial";
color:white;
}
textarea {
border:1px solid black;
background-color:#153f00;
font-family:"arial";
font-size: 11px;
color:white;
}
#menuDeroulant
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
}
#menuDeroulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
margin: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color: #618f00;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #618f00;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#menuDeroulant .sousMenu li
{
float: none;
font-family: Arial;
margin: 0;
padding: 0;
border: 0;
width: 175px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant .sousMenu li.folder a:link,
#menuDeroulant .sousMenu li.folder a:visited {
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color: #618f00;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
#menuDeroulant .sousMenu li.folder a:hover {
background-image: none;
background-color: #618f00;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#menuDeroulant li:hover ul, li:hover li:hover ul { display:block; }
body,td,th {
font-family: Arial;
font-size: 11px;
}
.listePhoto{
border-width: 1px;
border-style: solid;
border-color: #000000;
width:100%;
height:100px;
overflow:auto;
} |
Voila voilou. En attendant vos réponses, merci d'avance calim2: ...