Faire bouger l'arrière plan d'un <div>

Signaler
Messages postés
1
Date d'inscription
vendredi 11 avril 2008
Statut
Membre
Dernière intervention
25 décembre 2008
-
Messages postés
65
Date d'inscription
jeudi 20 janvier 2005
Statut
Membre
Dernière intervention
25 juin 2010
-
Bonjour à tous,
Je vous expose mon problème :
pour un menu, je dispose de liens définis de la manière suivante dans le css :

"a {width:100%; height:100%; display:block; background-image:url(../../bg.png); background-position:-207px top; background-repeat:no-repeat; }"

l'image bg.png, est donc mon image d'arrière plan et, dans cet état, n'est pas visible car positionnée en dehors de mon
.

Je souhaiterais que lors du click sur le lien, celle-ci apparaisse avec un effet "slide" ou glissé (càd, de la position x=-207px à la position x=0).

J'espérais pouvoir me servir des outils de la bibliothèque scriptaculous, mais je n'y arrive pas...

l'un d'entre vous aurait-il une idée pour m'aider ?
Je vous remercie d'avance

Johnny le Chat

2 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
bonjour,

"il suffit" de récupérer la position de l'image,
       puis d'appeler une fonction avec setTimeout qui la déplace,
       progressivement, "jusqu'à 0"

Cordialement

la position de l'image, c'est
window.getComputedStyle(lien,null).backgroundPosition pour FF
et lien.currentStyle.backgroundPositionX + lien.currentStyle.backgroundPositionY pour IE
le reste tu devrais savoir faire....

          [mon Site] [M'écrire] Bul         
Messages postés
65
Date d'inscription
jeudi 20 janvier 2005
Statut
Membre
Dernière intervention
25 juin 2010

Pour avoir les meilleurs exemples & codes Script.aculo.us:
http://github.com/madrobby/scriptaculous/wikis/combination-effects-demo

et pour ton background, crrer une image PNG, de 0 a 100px par ex: rien, transparent
& 100->200 ton background, peut etre que firefox/autres interpretent mal le -200 px pour une image.. a verifier !

good luck