11548 sujets

JavaScript, DOM et API Web HTML5

Probleme d'affichage de ma balise div

bonjours

j'ai éditer ce code avec l'aide de ChickN d'un autre forum (désoler pour la premier ecriture)

le seul probleme c'est que je ne parvien pas a faire en sorte que la balise div que je fais apparaitre reste visible pour que l'utilisateur sache cliquer sur le lien qui est a l'interieur quelqu'un peux me dire quoi faire

merci d'avance

mon code 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<script type="text/javascript">
function show() {
	var menu = document.getElementById('menu');
	
	if(menu.style.visibility == "hidden") { // Si il est cacher, on l'affiche
		menu.style.visibility = "visible";

	}
}
function hide() {
	var menu = document.getElementById('menu');

	if(menu.style.visibility == "visible") { // Si il est visible, on le cache
		menu.style.visibility = "hidden";
	}
}
</script>
	<a id="chat1" onMouseOver="show()" onMouseOut="hide()">Nos m&acirc;les </a>
<div id="menu" style="visibility: hidden;">
Lien qui vont s'afficher
</div>
</body>
</html>

Modifié par matcra (21 Apr 2011 - 16:59)
Bonjour,

ton analyse n'est pas bonne, en fait quand tu passes sur un lien, tu le montres et quand tu n'es plus dessus, tu le fermes ( onMouseOver = show(), onMouseOut = hide() )

il faudrait que quand tu passes dessus tu testes si ouvert ou fermé, si ouvert, on ferme, si fermé, on ouvre.

donc onMouseOver = show_hide()

avec 

function show_hide() { 
    var menu = document.getElementById('menu'); 
     
    if(menu.style.visibility == "hidden") { // Si il est cacher, on l'affiche 
        menu.style.visibility = "visible"; 
 
    }  
 
    if(menu.style.visibility == "visible") { // Si il est visible, on le cache 
        menu.style.visibility = "hidden"; 
    } 
}



et la ton menu restera ouvert tant que tu ne repasses pas dessus.

l'idéal serait que tu fermes éventuellement un autre div qui aurait pu rester ouvert.

en stockant par exemple l'id du div ouvert que tu réutiliserais pour le fermer à l'ouverture d'un autre div.




var id_precedent = '';

function show_hide() { 
    var menu = document.getElementById('menu'); 
     
    if(menu.style.visibility == "hidden") { // Si il est cacher, on l'affiche 
        if(id_precedent != ''){
             document.getElementById(id_precedent).style.visibility="hidden";
        }
        menu.style.visibility = "visible";
        id_precedent = menu;
 
    }  
 
    if(menu.style.visibility == "visible") { // Si il est visible, on le cache 
        menu.style.visibility = "hidden"; 
    } 
}


teste et dis moi si c'est fonctionnel.
peut être moi qui retape tout mal car la suis un peux perdu mais parviens pas a le faire fonctionner

tu remplace le mien ou tu change ??
désolé ... quelques grosses erreurs ... déjà sur le if else qui s'est transformé en if if qui forcement ne te renverra pas grd chose


voila le code fonctionnel Smiley smile 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>

<script type="text/javascript">
var precedent=null;
 
function show_hide() {
    var menu = document.getElementById('menu');

    if(menu.style.visibility == "hidden") { // Si il est cacher, on l'affiche
        if(precedent){
             precedent.style.visibility="hidden";
        }
        menu.style.visibility = "visible";
        precedent = menu;

    }else{ // Si il est visible, on le cache
        menu.style.visibility = "hidden";
    }
}
</script>

    <a id="chat1" onMouseOver="show_hide()">Nos m&acirc;les </a>
<div id="menu" style="visibility: hidden;">
Lien qui vont s'afficher
</div>
</body>
</html>


testé et fonctionne chez moi sous firefox Smiley smile
fonctionne niquel cher moi e seul problème mtn c'est qu'il disparais plus tout seul sauf si on repasse sur le mot pas possible de le faire disparaitre tout seul

sur un autre site on me dit que mon code de depart est bon mais que je dois ajouter ca

"En gros ta sémantique pour que le menu reste ouvert quand on va dessus c'est:
Si la souris est sur le menu (donc onMouseOver sur ton div), alors on le voit (donc visibility: visible; )"
Modifié par matcra (20 Apr 2011 - 19:07)
ok je n'avais pas compris toute ta demande.

A mon avis, dans ce cas la, l'ideal est d'utiliser le systeme d'arbo <ul><li>

dans ton cas :



<ul onMouseOut="hide()"> 
    <li><a onMouseOver="show()">Nos m&acirc;les </a></li> 
    <li>
        <div id="menu" style="visibility: hidden;">
            Lien qui vont s'afficher  
        </div>
    </li>  
</ul>




<script type="text/javascript"> 
var precedent=null; 
  
function show() { 
    var menu = document.getElementById('menu'); 
 
    if(menu.style.visibility == "hidden") { // Si il est cacher, on l'affiche 
        if(precedent){ 
             precedent.style.visibility="hidden"; 
        } 
        menu.style.visibility = "visible"; 
        precedent = menu; 
 
    }else{ // Si il est visible, on le cache 
        menu.style.visibility = "hidden"; 
    } 
} 
  
function hide() { 
    var menu = document.getElementById('menu'); 
 
    if(menu.style.visibility == "visible") { // Si il est visible, on le cache
        menu.style.visibility = "visible"; 
    }
} 
</script>


voili voilou, si tu as des questions sur le pourquoi de ce que j'ai fait, n'hesite pas, et surtout dis moi si cela fonctionne bien.
Ce n'est pas beau de mentir...
Ce code est de moi matcra...
Et on ne dit pas java on dit JavaScript ou JS BOLOSSE

ne vient plus chercher de l'aide sur le Site du Zero je te grillerais a chaque fois... Smiley fache

ChickN
ok j'ai arranger la vérité mais bon sur le site du zero tu me fessais tourner en bourrique j'ai éditer le sujet

j’espère que tu ne m'en tiendras pas trop rigueur
Modifié par matcra (21 Apr 2011 - 17:06)
Sinon tu peux faire la même chose en CSS :


	<style type="text/css">
	.submenu {
		display: none;
	}
	
	.menu:hover .submenu {
		display: block;
	}
	</style>




		<ul>
			<li class="menu">
				<a href="#">Nos mâles</a>
				<ul class="submenu">
					<li><a href="#">Mon lien...</a></li>
					<li><a href="#">Mon lien...</a></li>
					<li><a href="#">Mon lien...</a></li>
					<li><a href="#">Mon lien...</a></li>
					<li><a href="#">Mon lien...</a></li>
				</ul>
			</li>
		</ul>
Sujet clos
Aller à