Discussion :

[Juju54350]

Bonjour,

Je travaille sur un site en ASP.NET. Sur une page .aspx, je dois à un moment afficher un div lorsque je passe la souris sur un lien. Voici le code :

Code :

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

1
2
3
4
5
6
 
<a id="actions_menu" class="logout" onmouseover="ShowMenu()">Menu</a>                
<div id="actions" runat="server" visible="false">
    <a href="">S'identifier</a>
    <a href="">S'inscrire</a>
</div>

Je sais que je peux utiliser la propriété onmouseover pour cela mais rien ne se passe lorsque je lui attribue une fonction :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript">
    function ShowMenu()
    {
          document.getElementById('actions').style.visibility = 'visible';
     }
</script>

Ai-je commis une faute dans la fonction ? J'ai même essayé avec un alert('') et là ça marche bien donc ça rentre dans la fonction quand je passe la souris sur le lien.

Merci d'avance de votre aide.

[vermine]

Bonjour,

Essayez plutôt un :

Code :

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

style="visibility:hidden"

en espérant que ce ne soit pas traduit par l'ASP.

[RomainVALERI]

Selon l'endroit où est placé le script définissant ta fonction ShowMenu, le DOM peut ne pas être encore chargé entièrement (ce qui expliquerait qu'avec un alert l'erreur ne se produise pas).
Peux-tu nous montrer où est inclus cet élément <script> ?

(remarque : évite quand même le code serveur s'il te plait : la politique du forum serait plutot de publier le code généré, pour éviter à chaque participant du forum de devoir maitriser une douzaine de langages serveur pour comprendre de quoi on parle ;-)

[Juju54350]

Tu parles de l'HTML ou du Javascript là ?
Parce que bien sûr, je peux faire ça :

Code :

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

1
2
 
<div style="visibility: hidden;">

[vermine]

En fait votre code fonctionne chez moi sauf que "visible=false" n'est pas interprété donc la div est déjà visible. Je l'ai cachée avec hidden et le onmouseover l'affiche bien.

[Juju54350]

Moi ça ne change rien que je mette "visible" ou "visibility". Tu travailles aussi en ASP ?

Sinon j'ai trouvé autre chose mais qui ne marche qu'à moitié :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#actions_menu").mouseover(function() {
                $("div").css("visibility", "visible");
            });
            $("#actions_menu").mouseout(function() {
                $("a").css("visibility", "hidden");
            });
        });
    </script>

J'arrive bien à donner l'id de l'élément pour les méthodes "mouseover" et "mouseout" mais pour modifier la visibilité, mettre le bon id de l'élément ne change rien, par contre mettre directement un tag html (comme "a") fonctionne mais c'est pas ce que je veux...


=> RomainVALERI : "<script>" est placé dans le "head" juste après mes styles CSS.

[vermine]

Non, je ne suis pas en ASP et c'est malheureusement là que la bas blesse. Je ne sais pas comment les tag HTML ASP sont gérés. Comme indiqué par RomainVALERI, peut-être que le code HTML généré ("afficher la source" sur le navigateur) nous en dirait plus.

[RomainVALERI]

Oui je crois que c'est vermine qui a raison : c'est la confusion entre les propriétés visible et visibility qui pose problème au mouseover : utilise visibility partout et non pas visible.

[Juju54350]

Bah le truc c'est que j'ai mis "visibility" partout :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#actions_menu").mouseover(function() {
                $("a").css("visibility", "visible");
            });
            $("#actions_menu").mouseout(function() {
                $("a").css("visibility", "hidden");
            });
        });
    </script>

Mais pour la méthode ".css", je n'arrive pas à définir d'id bien précis (par exemple, quand la souris se retire du lien, tous les "a" sont cachés).


EDIT : En fait, je viens de capter : j'avais mis un "runat="server"" à mon div que je devais afficher, il suffisait de l'enlever pour que tout fonctionne. J'ai mis le temps !

[vermine]

Je suppose que .css ne joue pas avec les id. Mettez une classe sur la <div> et récupérer-là via cette même classe. Sans doute que .css sera plus conciliant.