Effet de transition CSS3 - changement de Background sur evenement

Signaler
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
-
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
-
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 :
function changeBgImage( Class )
{
    document.body.className = Class;
}


Mon CSS :
.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 :


  
[# ]

  
[# ]

  
[# ]

  
[# ]





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'

4 réponses

Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
Salut,

en CSS3 ce sont les attributs transition-property et transition-duration qu'il faut utiliser. Bien évidemment il faudra les agrémenter de -moz ou -webkit pour la compatibilité des navigateurs. Tu peux trouver explication et exemple ici.
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
4
Bonjour et merci de ta réponse !

Arf... En fait j'ai développé une HomePage en JQUERY, ça marche sur tous les navigateurs, excepté IE9 mis à jour ! étrange... Du coup je me suis rabattu sur une page d'exception pour IE9 (mis à jour), mais évidemment, IE9 n'est pas compatible avec transition-duration et transition-property ...
Donc, est-ce que tu connaîtrais une autre solution compatible avec IE9 stp ?
Là je m'arrache les cheveux à trouver des alternatives simples, plutôt visuelles... et qui marche sur ce fichu IE !!!!! grrr lol

Merci à toi
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
tu as essayé avec le préfixe -ms (implémentation spécifique IE) ?
Sinon va falloir coder toi-même le bousin en Javascript ...
Perso je connais pas d'alternative toute faite (mais j'utilise presque jamais les transitions).
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
edit : en me baladant j'ai trouvé ça, regarde si tu y trouves ton bonheur.