Sujet Précédent Sujet Suivant

Effet de transition CSS3 - changement de Background sur evenement

payetonju Messages postés 436 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 2 juillet 2014 - 21 mai 2012 à 14:29
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 - 22 mai 2012 à 08:19
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

Réponse 1 / 4
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
21 mai 2012 à 17:01
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.
0
Réponse 2 / 4
payetonju Messages postés 436 Date d'inscription mercredi 26 septembre 2007 Statut Membre Dernière intervention 2 juillet 2014 4
21 mai 2012 à 17:31
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
0
Réponse 3 / 4
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
22 mai 2012 à 08:17
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).
0
Réponse 4 / 4
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
22 mai 2012 à 08:19
edit : en me baladant j'ai trouvé ça, regarde si tu y trouves ton bonheur.
0

Discussions similaires

Script : Mail automatique de rappel
cs_alexdarcy -
alexdarcy -

4 réponses
Effet miroir sur une image
turnam -
turnam -

2 réponses
Math 3D changement de repere
cs_Stephane -
Stephane -

6 réponses
effet verre sur illustrator
shrimpy33 -
jreaux62 -

3 réponses
Effet Tampon
cs_christobal -
Jabo -

1 réponse
Rejoignez-nous