Bonjour à tous,
Ce code fonctionne très bien sur chrome, les backgrounds s’enchaînent bien lorsque je survole mon cadre.. Sur mozilla, une bref page blanche se produit lors du 1er mouseover et donc du 1er changement d’arrière plan... ensuite ils s'enchainent correctement.
Sur IE, a chaque mouseover, ce bref instant 'blanc' fait surface

Avez vous une idée (car cela me dérange..), ou peut êtrece code n'est il pas l'idéal.
J'ai essayé avec addeventlistener mais le phénomène est le même..

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
.cadre {
position: absolute;
width: auto;
height: auto;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
    }
.image {
  display: block;
    width: auto;
    height: auto;
}
 
body
{
margin:0;
padding: 0;
  background: url("img/FOND3.jpg") no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}
</style>
 
<div id=cadre class=cadre onmouseover="over()"  onmouseout="out()" style='top:8%; left:8%;'><img src="img/svalbard.jpg"  class="image" alt="Le Svalbard" />
</div>
 
<script type="text/javascript">
var body = document.getElementsByTagName ("body")[0];
var cadre = document.getElementsById("cadre");
function over() {
body.style.backgroundImage = 'url(\'img/FOND3spitz.jpg\')';
body.style.backgroundSize = "cover";
}  
function out() {
body.style.backgroundImage = 'url(\'img/FOND3.jpg\')';
body.style.backgroundSize = "cover";
}   
</script>