animation d'une image au survol

Version imprimable

23/09/2011, 20h16
fny_bnfnt

animation d'une image au survol

Bonsoir à toutes et à tous!

J'ai beau avoir chercher sur le net, je ne trouve rien sur ce que je désire.

En fait, je vous explique, je cherche comment, au survol de la souris sur un texte, je peux faire "monter" une image.

Explications:

J'ai un menu horizontal, quand la souris survol un de mes onglet j'aimerais que derrière mon menu une image apparait verticalement (qui serait à l'origine visibilty: hidden ou display:none). Comme de l'herbe qui pousse. ;)

Si qqn peut m'aider, s'il vous plait ^^
24/09/2011, 11h33
RomainVALERI

Citation:

Envoyé par fny_bnfnt

Comme de l'herbe qui pousse. ;)

Si par bonheur tu utilisais déjà la lib Prototype, je te conseillerais bien d'y rajouter la couche script.aculo.us pour ce genre d'effet. Il y a une mini démo dans la page de description, mais on peut bien sûr en faire un peu ce qu'on veut... ^^

en javascript "pur" il existe la méthode setTimeout ou setInterval qui associée à la modification de la position peuvent faire l'affaire
exemple rapide

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#div_move {
  position : absolute;
  top : 200px;
  width : 100px;
  height : 100px;
  border : 1px solid black;
}
</style>
</head>
<body>
<div id="div_move"></div>
<script type="text/javascript">
var oDiv = document.getElementById('div_move');
function deplace(){
  if( oDiv.offsetTop > 0){
    oDiv.style.top = (oDiv.offsetTop -5) +"px"
    setTimeout( arguments.callee, 10);
  }
}
deplace();
</script>
</body>
</html>

24/09/2011, 14h58
RomainVALERI

Citation:

Envoyé par NoSmoking

en javascript "pur" il existe la méthode setTimeout ou setInterval qui associée à la modification de la position peuvent faire l'affaire

C'est très juste. Si tu as quelques connaissances en Javascript, c'est probablement une meilleure idée, d'ailleurs :) La solution "librairie" ne se justifie que si l'ensemble du site (ou en tous cas suffisamment de fonctionnalités) repose dessus (appels ajax ? autres effets d'animation nécessaires ? auto-completion de champs ? etc.)