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 :

"mouseover" - "onmouseout"


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut "mouseover" - "onmouseout"
    bonjour a vous voila j'ai un problème avec une fonction onmouseover et onmouseout en fait voila je voudrais evidemment que lorsque la souris soit sur le titre de mon menu celui ci fasse dessendre les sous menu et que lorsqu'il n'y as plus la souris celui ce remonte

    voici mon code html :
    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
     
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>RCN </title>
    	<link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
     
    <div id="haut">
    <img src="image/banniere.png" alt="banniere"/></div>
    </!--></!--></!--></!-->
    <div id="menu">
    <ul>
        <li><a href="#"><span> A</span>ccueil </a></li>
    <table>
     
    	<tr>
    		<td id="Liens" onmouseover="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"onMouseout="draw()";"> <li><a href="#"><span> L</span>iens </a></li></td>
     
    	<td id="Organisation" onclick="document.getElementById('GrosTitre2_PetitTitre1').style.display='block'; document.getElementById('GrosTitre2_PetitTitre2').style.display='block';"><li><a href="#"><span> O</span>rganisation </a></li</td>
    		<td id="Résultats" onclick="document.getElementById('GrosTitre3_PetitTitre1').style.display='block'; document.getElementById('GrosTitre3_PetitTitre2').style.display='block';"><li><a href="#"><span> R</span>ésultats </a></li></td>
    	        <td id="Records" onclick="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"> <li><a href="#"><span> R</span>ecords </a></li></td>
    		<td id="Médiathèque" onclick="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"> <li><a href="#"><span> M</span>édiathèque </a></li></td>
     
    <tr/>
     
    	<tr>
    		<td>
    			<span id="GrosTitre1_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
    			<span id="GrosTitre1_PetitTitre2" style="display:none;">-Petit Titre 2</span>
    		</td>
    		<td>
    			<span id="GrosTitre2_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
    			<span id="GrosTitre2_PetitTitre2" style="display:none;">-Petit Titre 2</span>
    		</td>
    		<td>
    			<span id="GrosTitre3_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
    			<span id="GrosTitre3_PetitTitre2" style="display:none;">-Petit Titre 2</span>
    		</td>
    		<td>
    	</tr>
     
    <table>
     
     
     
                        </ul>
    </div>
    </!--></!--></!--></!-->
    <div id="titre">
    <h2>titre </h2>
    </div>
    </!--></!--></!--></!-->
    <div id="corps">
    <p>
    </!--></!-->
    </p>
    </div>
    </!--></!--></!--></!-->
    <div id="bas">
    <p>
     Valid
     <a href="http://validator.w3.org/check?uri=referer">/ xhtml /</a>
    <a href=" http://jigsaw.w3.org/css-validator/check/referer"> css2 /</a>
    </p>
    </div>
    </body>
    </html>
    vous avez constater que la ligne qui me préocuper étais celle ci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <td id="Liens" onmouseover="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"onMouseout="draw()";"> <li><a href="#"><span> L</span>iens </a></li></td>
    voila si vous pouviez m'aider ce serais super cool

  2. #2
    Membre Expert Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Par défaut
    Dans la console, il me met "draw is not defined" ...

  3. #3
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation Envoyé par DoubleU Voir le message
    Dans la console, il me met "draw is not defined" ...
    Sans compter les erreurs dans les doubles quottes

    A+

  4. #4
    Membre Expert Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Par défaut
    C'est pas faux, mais moi il me les mets pas

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    ben a la limite on oublie mon code !!

    comment auriez vous fait a ma place ?

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par luxb_2000 Voir le message
    comment auriez vous fait a ma place ?
    Déclarer "draw".
    Remettre les quottes dans l'ordre.



    A+

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    arff j'ai oublier de dire que j'étais noob !!!!

    il est possible de me faire un exemple en entier ? svp

  8. #8
    Membre chevronné
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    397
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 397
    Par défaut
    Citation Envoyé par luxb_2000 Voir le message
    arff j'ai oublier de dire que j'étais noob !!!!

    il est possible de me faire un exemple en entier ? svp
    Tu n'as pas besoin d'un exemple, ce n'est qu'une question de logique, des quotes vont toujours par deux, toute quote ouverte doit être refermée à un moment ou un autre, donc ton nombre de double-quotes, c'est à dire ce symbole: " , tu dois en avoir un nombre pair.

    Pour ce qui est de draw(), si tu fais appel à une fonction qui n'existe pas, ça ne peut pas fonctionner.

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    ok je comprend déjà mieux merci donc pour faire en sort que draw fonction je doit ajouter quoi au code ?

  10. #10
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par luxb_2000 Voir le message
    ok je comprend déjà mieux merci donc pour faire en sort que draw fonction je doit ajouter quoi au code ?
    tu dois créer la fonction draw() :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function draw()
    {
    /* ton code javascript............. */
     
     
     
    }
    mais une fonction vide ne fera rien...

  11. #11
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    donc si je comprend bien je doit faire : (en gros)

    fonction open
    {
    onmouseover
    menu1 --> sous menu1
    sous menu 2
    }

    fonction draw
    {
    onmouseout
    menu1
    }

    c'est bien ça le schéma ?

  12. #12
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    euh.... tu as déjà fait du javascript ?

  13. #13
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    ben non justement c'est bien ça le problème c'est pour ça que je demande si on peut me faire un exemple car je ne comprend pas trop et j'ai regarder des tutos mes ça m'embrouille plus qu'autre chose !

  14. #14
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Créer un menu en javascript ce n'est pas ce qu'il y a de plus simple
    Sinon sur le net tu peux trouver des menus "clef en main".


    tu as vu ces cours :
    http://javascript.developpez.com/cours/#generalite
    http://jacques-guizol.developpez.com/javascript/

  15. #15
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 12
    Par défaut
    Bonjour ,
    donc j'ai réussi t a trouver un tuto assez simple a appliquer mais j'ai encore un problème ( évidemment!)
    voici le code html :
    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
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>RCN </title>
    	<link href="style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
     
    </head>
    <body>
     
    <div id="haut">
    <img src="image/banniere.png" alt="banniere"/></div>
    </!--></!--></!--></!-->
    <div id="menu">
    <ul>
        <li><a href="#"><span> A</span>ccueil </a></li>
    <table>
     
     
     
     
    <dl>			
    		<dt onmouseover="javascript:montre('smenu1');"><li><a href="#"><span> L</span>iens </a></li></dt>
    			<dd id="smenu1">
    				<ul>
    					<li><a href="#">Sous-Menu 1.1</a></li>
     
    					<li><a href="#">Sous-Menu 1.2</a></li>
    					<li><a href="#">Sous-Menu 1.3</a></li>
    					<li><a href="#">Sous-Menu 1.4</a></li>
    					<li><a href="#">Sous-Menu 1.5</a></li>
    					<li><a href="#">Sous-Menu 1.6</a></li>
    				</ul>
     
    			</dd>
    	</dl>
     
    <dl>	
    		<dt onmouseover="javascript:montre('smenu2');"><li><a href="#"><span> O</span>rganisation </a></li></dt>
    			<dd id="smenu2">
    				<ul>
    					<li><a href="#">Sous-Menu 2.1</a></li>
    					<li><a href="#">Sous-Menu 2.2</a></li>
     
    					<li><a href="#">Sous-Menu 2.3</a></li>
    					<li><a href="#">Sous-Menu 2.4</a></li>
    				</ul>
    			</dd>
    	</dl>
     
    <dl>	
    		<dt onmouseover="javascript:montre('smenu3');"><li><a href="#"><span> R</span>ésultats </a></li></dt>
    			<dd id="smenu3">
     
    				<ul>
    					<li><a href="#">Sous-Menu 3.1</a></li>
    					<li><a href="#">Sous-Menu 3.2</a></li>
    					<li><a href="#">Sous-Menu 3.3</a></li>
    					<li><a href="#">Sous-Menu 3.4</a></li>
    					<li><a href="#">Sous-Menu 3.5</a></li>
     
    				</ul>
    			</dd>
    	</dl>
    <dl>	
    		<dt onmouseover="javascript:montre('smenu4');"><li><a href="#"><span> R</span>ecords </a></li></dt>
    			<dd id="smenu4">
    				<ul>
    					<li><a href="#">Sous-Menu 4.1</a></li>
     
    					<li><a href="#">Sous-Menu 4.2</a></li>
    					<li><a href="#">Sous-Menu 4.3</a></li>
    				</ul>
    			</dd>
    	</dl>
     
     
    <dl>	
    		<dt onmouseover="javascript:montre('smenu5');"><li><a href="#"><span> M</span>édiathèque </a></li>
     </dt>
    			<dd id="smenu5">
    				<ul>
    					<li><a href="#">Sous-Menu 5.1</a></li>
     
    					<li><a href="#">Sous-Menu 5.2</a></li>
    					<li><a href="#">Sous-Menu 5.3</a></li>
    				</ul>
    			</dd>
    	</dl>
     
     
    	</table>
     
     
     
                        </ul>
    </div>
    </!--></!--></!--></!-->
    <div id="titre">
    <h2>titre </h2>
    </div>
    </!--></!--></!--></!-->
    <div id="corps">
    <p>
    </!--></!-->
    </p>
    </div>
    </!--></!--></!--></!-->
    <div id="bas">
    <p>
     Valid
     <a href="http://validator.w3.org/check?uri=referer">/ xhtml /</a>
    <a href=" http://jigsaw.w3.org/css-validator/check/referer"> css2 /</a>
    </p>
    </div>
    </body>
    </html>
    mon problème maintenant est que j'ai sur ce tuto un css a mettre dans mes balise "head" que voici :
    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
    <style type="text/css">
     
    body {
    margin: 0;
    padding: 0;
    background: blue;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    }
    #menu dl {
    float: left;
    width: 12em;
    margin: 0 1px;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    }
    #menu dd {
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    }
     
    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid orange; 
    }
     
    a {text-decoration: none;
    color: grey;
    color: #222;
    }
     
    </style>

    et la lors que j'applique ce css évidemment je me retrouve avec la présentation de la page du tuto alors je voulais savoir si quelqu'un pouvais me faire un code css pour adapter a mon site ?

    site en aperçus ici :http://ks3710.kimsufi.com/~rcnantai/...n/exemple.html

    merci

  16. #16
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par luxb_2000 Voir le message
    alors je voulais savoir si quelqu'un pouvais me faire un code css pour adapter a mon site ?
    Et bien faisons plutôt ça dans l'autre sens :
    tu adaptes le CSS à ton site, et si tu rencontres des problèmes bloquants, tu pourras trouver les réponses à tes questions précises sur le forum CSS de Developpez

    A+

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