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

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

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

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

23/09/2011, 20h16	#1
fny_bnfnt Candidat au titre de Membre du Club Étudiant Inscription : octobre 2010 Messages : 67 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : octobre 2010 Messages : 67 Points : 11 Points : 11	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 ^^
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email