Clignottement lors d'un "swap" de div
Bonjour,
Losque je survole mon div, l'image s'enlève pour laisser appraitre un div contenant du texte et des liens.
Lorsque je quitte le div, l'image revient.
Pour cela j'utilise onMouseOver et onMouseOut, et ca marche bien. Le seul soucis et qu'il apparait un clignottement lorsque l'on quitte non pas le div, mais la partie qui contient le texte.
Vous pouvez tester ici, sur la vignette en haut à gauche.
http://edupassion.com/tests/ftp-file...emiere%20page/
Le code correspond à cela :
Code:
1
2
3
4
|
<div id="vignetteEleve" onMouseover=" swapContentEleve(this);">
<img src="images/eleves.png" />
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var eleveOver=false;
function swapContentEleve(element)
{
if (eleveOver ) return;
eleveOver=true;
var oldContent=element.innerHTML;
var element2=document.getElementById("survoleEleve");
element.innerHTML=element2.innerHTML;
}
function restoreEleve(){
if (!eleveOver ) return;
eleveOver=false;
/*var element2=document.getElementById("restoreEleve");*/
document.getElementById('vignetteEleve').innerHTML='<img src="images/eleves.png" />';
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div id="survoleEleve" style="height:200px; width:400px; background-color:#FFEEEE ;">
<div id="survoleEleveContent" class="survoleEleve" onmouseout="restoreEleve();">
<!-- On a un premier div servant à mettre le titre Eleve. Il s'agit d'une simple image de fond avec une cellule-->
<div class="banniereHauteVignetteGauche"> Houla
</div>
<!--On a ensuite le div de texte-->
<div class="texteVignette">
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
</div>
</div>
</div> |
Je ne pense pas que ce soit 100% un bug de navigateur car Firefox et IE6 ont exactement le même traitement.
