Bonjour,

J'ai 4 images, et 1 background appelé en javascript sur un évènement Onmouseover sur chacune des images qui appelle un bakcground différent.
J'aimerais savoir comment faire apparaitre ces backgrounds en fondu, effet de transition en FADE ou peut importe.. une transition SVP.

Voici mon code javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
function changeBgImage( Class )
{
    document.body.className = Class;
}
Mon 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
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
 
.LoisirsBG:hover
{
  background-image:url(<?php echo PATH_IMG_STATIC; ?>menu/body/background.jpg);
  background-repeat:repeat-x;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  -o-background-size:100% 100%;
  background-size:100% 100%;
  background-color:#bbbbbb;
}
.OsmozBG:hover
{
  background-image:url(<?php echo PATH_IMG_STATIC; ?>menu/body/background_osmoz.jpg);
  background-repeat:repeat-x;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  -o-background-size:100% 100%;
  background-size:100% 100%;
  background-color:#ecd48c;
}
.VirtualBG:hover
{
  background-image:url(<?php echo PATH_IMG_STATIC; ?>menu/body/background_virtual.jpg);
  background-repeat:repeat-x;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  -o-background-size:100% 100%;
  background-size:100% 100%;
  background-color:#000000;
}
.GpuBG:hover
{
  background-image:url(<?php echo PATH_IMG_STATIC; ?>menu/body/background_gpu.jpg);
  background-repeat:repeat-x;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  -o-background-size:100% 100%;
  background-size:100% 100%;
  background-color:#424244;
}
.BodyBG
{
  background-color:#01042f;
  background-image:url(<?php echo PATH_IMG_STATIC; ?>homepage/background_home.jpg);
  background-repeat:no-repeat;
}
.PagingIE9
{
  float:left;
}
Et enfin mon HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
<div  style="width:100%;">
  <div class="PagingIE9"><a href="#"><img src="img1.jpg" onmouseover="changeBgImage('VirtualBG');" onmouseout="changeBgImage('BodyBG');" /></a></div>
  <div class="PagingIE9"><a href="#"><img src="img2.jpg" onmouseover="changeBgImage('OsmozBG');" onmouseout="changeBgImage('BodyBG');" /></a></div>
  <div class="PagingIE9"><a href="#"><img src="img3.jpg" onmouseover="changeBgImage('LoisirsBG');" onmouseout="changeBgImage('BodyBG');" /></a></div>
  <div class="PagingIE9"><a href="#"><img src="img4.jpg" onmouseover="changeBgImage('GpuBG');" onmouseout="changeBgImage('BodyBG');" /></a></div>
</div>
Pouvez-vous m'aider SVP ? Je trouve ça super affreux sans effet de transition, ça agresse trop avec les différentes couleurs des différents fonds.

En vous remerciant, Bonne après midi

Ju'