faire bouger l'arrière plan d'un

Question

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

Bul3 · Answer

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

DakM · Answer

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

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

2 réponses

Votre réponse

Discussions similaires