Effet transition CSS3 sur background appelé via événement
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:
1
2
3
4
5
|
function changeBgImage( Class )
{
document.body.className = Class;
} |
Mon CSS :
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
|
.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:
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'
