animation d'une image au survol

**fny_bnfnt** · 23/09/2011, 20h16

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 ^^

**RomainVALERI** · 24/09/2011, 11h33

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... ^^

**NoSmoking** · 24/09/2011, 14h43

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**RomainVALERI** · 24/09/2011, 14h58

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.)

animation d'une image au survol

JavaScript

Vue hybride

Discussions similaires

Partager

Partager