Rendre un div visible avec onmouseover

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:

---

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:

---

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.

Bonjour,

Essayez plutôt un :

Code:

---

style="visibility:hidden"

---

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

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

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

Code:

---

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

---

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.

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:

---

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.

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.

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.

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

Code:

---

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 !

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.

Enlever le runat="server" corrige le problème, c'est vrai, mais l'essence du problème c'est le visible="false".

Quand ASP voit une balise avec ceci, il n'envoie pas du tout le HTML correspondant : pour le client, la <div> n'existe pas.

http://www.developpez.net/forums/d89...ibilite-panel/

;)

Citation:

---

Envoyé par Watilin

Enlever le runat="server" corrige le problème, c'est vrai, mais l'essence du problème c'est le visible="false".

Quand ASP voit une balise avec ceci, il n'envoie pas du tout le HTML correspondant : pour le client, la <div> n'existe pas.

http://www.developpez.net/forums/d89...ibilite-panel/

;)

---

He he merci de l'info ^^ Ne connaissant pas l'ASP je ne l'avais pas vue venir celle-là...

Conclusion corrolaire à la discussion : ... d'où l'importance de poster le code généré et non pas le code serveur car <insérer ici mon gna gna gna habituel et le lien qui va bien> :aie:

Bah le "visible=false" n'est pas "compatible" avec le Javascript donc ?
Vaut mieux utiliser "style.visibility='visible'" dans ce cas. Mais je pensais à autre chose, est-ce possible de mettre l'ID d'un composant ASP dans "document.getElementById" ou seuls l'ID des composants HTML fonctionnent ?

Autre chose que j'ai découvert : l'ID qu'on donne à un composant ASP va changer dans le code source de la page (ainsi "Label1" devient "ctl00_Label1").

Donc on peut donner l'ID "changé" en Javascript même si le composant ASP possède sa propriété "runat="server"". :)

Merci pour ces précisions. :)
J'espère uniquement que cette transformation d'id est réellement prévisible ou bien si ça change d'une version à l'autre. :-o

Comment ça d'une version à l'autre ?

Tout ce que je peux te dire c'est que tu peux mettre ça :

Code:

---

1 2	<asp:Label ID="Label1" runat="server">Test</asp:Label>

---

Et récupérer l'ID comme cela :

Code:

---

1 2 3 4

<script type="text/javascript"> $("#ct100_Label1").css.visibility = "hidden"; </script>

---

J'imagine qu'il doit bien y avoir en ASP une manière de paramétrer le préfixage automatique des id des éléments générés... ^^ ou alors c'est vraiment une histoire de f... (enfin bon sait-on jamais, c'est quand même de l'ASP hein :mrgreen:)