Bonjour,

J'ai un petit gros problème avec un script JS qui a pour but de changer le code HTML d'un div.

Je m'explique : J'ai un menu, et je voudrais n'afficher que les titres, et, au passage de la souris, agrandir le texte. Mais, lorsque la souris sort de la zone définie par le titre, alors le menu se referme, sans que l'on ne puisse cliquer sur un lien, ce qui est parfait pas exactement ce que je souhaiterai ...

Pour voir le code, je ne l'ai pas sur moi, mais vous le trouverez (avec le bug) à l'adresse suivante : http://atelierscientifique.servhome.org/Test/

Je précise : Je n'ai mis le test que pour la partie du menu 'Notre équipe'.
*fait sa pub* Pour le site final, vous pouvez aller voir : http://atelierscientifique.servhome.org/

Comme vous le remarquerez, c'est un site que je fais pour mon collège (et plus précisément pour l'atelier scientifique de ce dernier).

Bonne chance,
L@o58

Il faut que tu fasses en sorte que le menu ne se referme pas tant que la souris se trouve soit sur le titre, soit sur le contenu du menu .

Pour cela je te conseille de ne pas mettre tes évènements sur le div du titre mais plutôt sur un div global, de cette façon :

<div id="global">
  <div id="titre"></div>
  <div id="contenu"></div>
</div>

Si tu mets donc tes évènements sur le div global ça résout tout. Car au début il n'y a que le titre donc si tu mets ta souris dessus elle sera aussi sur le div global, donc le menu complet s'affiche. Ensuite si tu déplaces ta souris sur le contenu du menu, tu resteras quand même dans le div global, donc pas de disparition .

Un lien avec un div en dessous ; sur le lien :
onmouseover="tafonction()"
onmouseout="tonautrefonction()"

La première fonction modifie le contenu du div qui est en dessous en ce que tu veux et puis l'autre le vide. Sinon dans le pire des cas, tu fait des div display none avec leurs contenu et a l'appelle de tes fonction tu les met en display block puis redisplay none.

Attention fonction à appeler après le chargement de la page pour pouvoir recuperer le div

@Zoro-zer0 : Raté, je voudrais faire un menu qui reste affiché (qu'on puisse cliquer dessus, sinon çà sert pas à grand-chose (un title suffirait))

@Nesquik69 : Nan, désolé, çà marche pas ...

Je montre le code actuel (qui marche pas) (servhome semble en plein crash serveur HTTP) :

<script type="text/javascript">
<!--
function ouvrir(idAOuvrir, txt)
{
	var div = document.getElementById(idAOuvrir);
	//div.style.height = "100px";
	div.innerHTML = unescape(txt);
}
function fermer(idAFermer)
{
	var div = document.getElementById(idAFermer);
	//div.style.height = "10px";
	div.innerHTML = '';
}
//-->
</script>
   <div class="element_menu" id="equipe_menu" onmouseover="ouvrir('contenu_equipe_menu', '%3Cul%3E%3Cli%3E%3Ca href=%22notre_equipe.php%22%3ELes membres de notre équipe%3C/a%3E%3C/li%3E%3Cli%3E%3Ca href=%22tokyo.php%22%3ENos expériences passées%3C/a%3E%3C/li%3E%3Cli%3E%3Ca href=%22contacter.php%22%3ENous contacter !%3C/a%3E%3C/li%3E%3C/ul%3E');" 
				onmouseout="fermer('contenu_equipe_menu')">
		<div id="titre_equipe_menu"><h3 style="background:#FF0000">Notre équipe</h3></div>
		<div id="contenu_equipe_menu"></div>
   </div>

C'est une grosse méthode de bourrin pas très pratique, que de passer en paramètre les choses à afficher
Il vaut mieux afficher le menu entier, mais masquer ce qui ne doit pas être affiché en CSS avec display:none;
Cette méthode a un second énorme avantage : elle permet de faire un menu utilisable sans javascript. En effet, il suffit de mettre tous les éléments visibles, puis de les masquer au chargement en javascript. Ainsi l'utilisateur qui n'a pas javascript voit le menu entier, l'autre ne voit que les liens et peut cliquer dessus pour dérouler le menu.

Voici donc le code html pour cela, un menu où tout est déjà écrit dedans :

<strong><a href="javascript:go(1)">Rubrique 1</a></strong><br />
<div id="rubrique1" style="padding-bottom: 5px;">
	<a href="#">Lien1</a><br />
	<a href="#">Lien2</a><br />
	<a href="#">Lien3</a><br />
</div>
<strong><a href="javascript:go(2)">Rubrique 2</a></strong><br />
<div id="rubrique2" style="padding-bottom: 5px;">
	<a href="#">Lien1</a><br />
	<a href="#">Lien2</a><br />
	<a href="#">Lien3</a><br />
</div>
<strong><a href="javascript:go(3)">Rubrique 3</a></strong><br />
<div id="rubrique3" style="padding-bottom: 5px;">
	<a href="#">Lien1</a><br />
	<a href="#">Lien2</a><br />
	<a href="#">Lien3</a><br />
</div>

Et le script qui sert à masquer les éléments lors du chargement, puis à gérer l'affichage et le masquage :

<script language="javascript">
var idRubriques = new Array('1', '2', '3');

//Masquage des rubriques au chargement de la page
for(var i=0; i<idRubriques.length; i++){
	document.getElementById('rubrique'+idRubriques[i]).style.display = 'none';
}

function go(n){
	for(var i=0; i<idRubriques.length; i++){
		var element = document.getElementById('rubrique'+idRubriques[i]);
		if(element.id == 'rubrique'+n){
			element.style.display = (element.style.display == '' ? 'none' : '');
		}
		else{
			element.style.display = 'none';
		}
	}
}
</script>

Notes pour que cela fonctionne :
- Le script doit être placé après l'html et non avant, puisqu'il modifie le display des éléments au chargement, ceux-ci doivent donc être chargés avant
- Tu dois modifier le contenu de l'array idRubriques si tu ajoutes de nouveaux menus

Merci, çà marchera bien un moment, mais ... Mon but, pour l'instant, serait de faire fonctionner le menu avec des onmouseover et des onmouseout ...
Donc je vais essayer d'adapter ta méthode, en attendant si quelqu'un a une méthode directement, je serai preneur avec ravissement !

Le onmouseout pour un menu du genre, c'est absolument désagréable à utiliser.
Je m'explique : tu survoles "rubrique1", ça t'affiche les liens de la première rubrique, et donc décale les rubriques 2 et 3.
A ce moment-là, l'utilisateur veut pointer "rubrique2" pour voir les liens de cette rubrique. Que se passe-t-il ? Il doit quitter rubrique1 avec sa souris... et hop, rubrique1 se referme, et du coup "rubrique2" remonte, et la zone qu'il visait avec sa souris n'est plus rubrique2.

Pour t'en convaincre, voici mon script précédent adapté pour fonctioner avec mouseover et mouseout (en utilisant donc la solution proposée par Nesquik69, qui consiste à mettre l'évènement sur une div globale) :

<div style="width: 80px; border: 1px solid black;">
	<div onmouseover="go(1)" onmouseout="go()">
		<strong>Rubrique 1</strong><br />
		<div id="rubrique1" style="padding-bottom: 5px;">
			<a href="#">Lien1</a><br />
			<a href="#">Lien2</a><br />
			<a href="#">Lien3</a><br />
			<a href="#">Lien4</a><br />
		</div>
	</div>
	<div onmouseover="go(2)" onmouseout="go()">
		<strong>Rubrique 2</strong><br />
		<div id="rubrique2" style="padding-bottom: 5px;">
			<a href="#">Lien1</a><br />
			<a href="#">Lien2</a><br />
		</div>
	</div>
	<div onmouseover="go(3)" onmouseout="go()">
		<strong>Rubrique 3</strong><br />
		<div id="rubrique3" style="padding-bottom: 5px;">
			<a href="#">Lien1</a><br />
			<a href="#">Lien2</a><br />
			<a href="#">Lien3</a><br />
		</div>
	</div>
</div>


<script language="javascript">
var idRubriques = new Array('1', '2', '3');

//Masquage des rubriques au chargement de la page
for(var i=0; i<idRubriques.length; i++){
	document.getElementById('rubrique'+idRubriques[i]).style.display = 'none';
}

function go(n){
	for(var i=0; i<idRubriques.length; i++){
		var element = document.getElementById('rubrique'+idRubriques[i]);
		if(element.id == 'rubrique'+n){
			element.style.display = (element.style.display == '' ? 'none' : '');
		}
		else{
			element.style.display = 'none';
		}
	}
}
</script>

Merci, problème résolu.