Discussion :

[ju0123456789]

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'

[Muchos]

http://www.w3schools.com/cssref/css3_pr_transition.asp

[Bovino]

Il n'y a pas de transition possible (sauf erreur de ma part...) pour les images de fond.

[ju0123456789]

Bonjour et merci de vos réponses,

Sil ça doit bien exister, car j'ai trouvé un petit exemple sur ce lien :
http://www.materiel.net/

Et la propriété "transition-property" ou bien "-ms-transition-property" en CSS3 n'est pas compatible IE9. IE9 (mis à jour) est justement mon problème principal...

C'est pour ça que je vous pose la question s'il existe une autre alternative pour faire cet effet de transition comme materiel.net par exemple.

Merci

[thelvin]

materiel.net fait ça avec jquery, pas avec css. Et jquery fait ça en modifiant l'opacité tous les x millisecondes, il n'utilise pas les propriétés css de transition.

L'astuce est d'avoir un div qui fait chaque fond disponible, et de n'en avoir qu'un seul visible à la fois. Et faire des transitions de fondu jquery au passage de l'un à l'autre.

[ju0123456789]

Et penses-tu qu'il est possible d'adapter ça directement sur le background du BODY ?

[thelvin]

Non, il n'existe qu'une seule background-image sur le body, et à ma connaissance il n'y a pas moyen de régler l'opacité de juste cette image. Or, l'astuce consiste à afficher deux images l'une sur l'autre et à varier leurs opacités.

Par contre, rien ne t'empêche de faire plein de <div> en position absolue, taille 100%, donc qui occupent toute la page, z-index très négatif donc affiché en-dessous de tout, et qui ont chacune un des backgrounds demandés. C'est grosso-modo ce que fait le site en question.

[aajmr]

ju0123456789 as-tu toujours besoin de la réponse ? Si oui, je crois que je peux t'aider.

[ju0123456789]

Bonjour !

Merci c'est gentil mais c'est bon, avec les conseils qu'on ma donnés ci-dessus j'ai réussi a pondre quelque chose de sympa =)

Bonne journée