IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

onmouseover et Animation d'un bouton


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Juillet 2004
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2004
    Messages : 9
    Par défaut onmouseover et Animation d'un bouton
    Bonjour,

    Mon but est d'animé un bouton au passage de la souris, et lorsque celle ci s'en éloigne.

    Mon code HTML :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="aboutBtn" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');" >
              <img id="aboutBtnImg" alt="" src="images/aboutBtn.png" border="0" /> 
    </div>
    Ce que je voudrais :
    - Lorsque la souris est à l'intérieur du <div> l'<img> monte
    - Lorsque la souris est à l'extérieur du <div> l'<img> descend

    Les fonctions moveBtnUp bouge l'<img> vers le haut et moveBtnDown bouge l'<img> vers le bas dans le <div>.

    Cependant il y a un problème:
    En effet lorsque la souris touche le <div>, l'onmouseover fonctionne. Cependant toujours dans ce même <div> lorsque la souris touche l'<img> l'onmouseover devient un onmouseout, alors qu'on est toujours dans le <div> contenant !!!

    Code : 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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
       <title>ehCat</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    	<style>
     
    	#aboutBtn{
    	width:200px;
    	height:200px;
    	border:5px solid;
     
    	}
     
    	#aboutBtnImg{
    	width:50px;
    	height:50px;
    	margin:auto;
    	border:1px solid;
    	position:relative;
    	}
    	</style>
     
     
    </head>
     
    <body onload="initMenu();">
     
    <script type="text/javascript">
     
    var onmouseover = 0;
    var onmouseout = 0;
     
    function moveBtnUp(btn)
    {
    	onmouseover = 1;
    	onmouseout = 0;
    	document.getElementById("test").innerHTML = 'onmouseover='+onmouseover;
    	document.getElementById("test2").innerHTML = 'onmouseout='+onmouseout;
     
    		clearTimeout(document.getElementById(btn+'Img').t2);
     
    	var obj = document.getElementById(btn+'Img').style;	
     
    	obj.backgroundColor = '#000000';
    	obj.zIndex = '1';
     
    	/*if ( parseInt(obj.top) == 0 )
    	{
    		obj.top = parseInt(obj.top)-1+'px';
    		document.getElementById(btn+'Img').t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
    	}*/
     
    	if ( parseInt(obj.top) <= 0 && parseInt(obj.top) > -10 )
    	{
    		obj.top = parseInt(obj.top)-1+'px';
    		document.getElementById(btn+'Img').t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
    	}
    	else if ( parseInt(obj.top) == -10 )
    	{
    		clearTimeout(document.getElementById(btn+'Img').t1);
    	}
    }
     
     
    function moveBtnDown(btn)
    {
    	onmouseover = 0;
    	onmouseout = 1;
    	document.getElementById("test").innerHTML = 'onmouseover='+onmouseover;
    	document.getElementById("test2").innerHTML = 'onmouseout='+onmouseout;
     
    	clearTimeout(document.getElementById(btn+'Img').t1);
     
    	var obj = document.getElementById(btn+'Img').style;
     
    	obj.backgroundColor = '#ffffff';	
     
    	if ( parseInt(obj.top) < 0 && parseInt(obj.top) >= -10 )
    	{
    		obj.top = parseInt(obj.top)+1+'px';
    		btn.t2 = setTimeout(function(){moveBtnDown(btn);}, 20)
    	}
    	else if ( parseInt(obj.top) == 0 )
    	{
    		clearTimeout(document.getElementById(btn+'Img').t2);
    	}
    }
     
     
    // ----------------------
    // Initialise les objets
    // ----------------------
     
    function initMenu() {
      document.getElementById('aboutBtnImg').style.top = '0px';
      document.getElementById('cvBtnImg').style.top = '0px';
      document.getElementById('portfolioBtnImg').style.top = '0px';
      document.getElementById('contactBtnImg').style.top = '0px';
     
    }
     
    </script>
    <div id="aboutBtn" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');" >
    	<div id="aboutBtnImg" ></div>
    </div>
     
    <br/><br/><br/><br/>
    <p id="test"></p>
    <p id="test2"></p>
     
    </body>
    </html>
    Avez vous déjà remarqué ce problème ?

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    classique, lorsque tu survole l'image il enclenche le onmouseout du div
    Il faut passer par un flag et un timer ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Juillet 2004
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2004
    Messages : 9
    Par défaut
    Merci de ta réponse.

    Qu'est ce qu'un flag ? (J'ai essayé de google ça, c'est moi ou ya un grand trou au niveau de l'apprentissage du javascript sur le web ?)
    Un timer c'est pas un setTimeout ?

    Ah et pour bouger des images d'un menu, c'est mieux de modifier, top et bottom de la position, ou alors mettre une image en fond et modifier les coordonnées de son background ??

Discussions similaires

  1. OnmouseOver et OnmouseOut dans un bouton submit
    Par sooprano dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/01/2009, 13h38
  2. Animation d'un bouton
    Par ludo86 dans le forum SDL
    Réponses: 6
    Dernier message: 07/09/2008, 20h00
  3. Gif animé sur un bouton
    Par g_barthe dans le forum wxPython
    Réponses: 2
    Dernier message: 02/09/2008, 14h28
  4. Animation d'un bouton
    Par Nadd dans le forum Flash
    Réponses: 1
    Dernier message: 01/10/2006, 17h46
  5. animation curseur sur bouton
    Par Chonko dans le forum Flash
    Réponses: 11
    Dernier message: 24/07/2006, 13h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo