Geckozone

bonjour à tous,

je suis en train d'essayer de creer un site perso, et depuis 3 jours je me prend la tete avec le menu deroulant horizontal que j'essai de mettre dessus

j'ai telecharger un menu via javascript.com (qui fonctionne quand je le teste) que j'essai d'adapter à ce que je voudrais mais cela ne fonctionne pas une fois que j'ai mis les valeurs perso pour mon site

je vois bien la barre de menu, mais les sous menu ne s'affiche pas ainsi qu'aucun effet au passage de la souris

alors je me resigne à venir demander de l'aide, pourriez vous me donner un coup de main svp car je commence vraiment à saturer

je vous joint ci-dessous la base html que j'ai modifié ainsi que le fichier script

merci d'avance :

base HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>mon site creations</title>
  <meta content="c&eacute;dric" name="Tekken">
  <script language="Javascript" src="jscript.js"></script>
</head>
<body
 style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///C:/Site%20local/Mes%20creations/Montage%20Tekken/monstre%20de%20tendresse.jpg); direction: ltr;">
<div id="ID_MENU0"
 style="border-width: 1px; left: 245px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="80">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="javascript:window.location='pageaccueil.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Accueil</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU1" onmouseover="displayMenu11()"
 style="border-width: 1px; left: 323px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu11()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU2" onmouseover="displayMenu21()"
 style="border-width: 1px; left: 471px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu21()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes liens</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU3" onmouseover="displayMenu31()"
 style="border-width: 1px; left: 619px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu31()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU4" onmouseover="displayMenu41()"
 style="border-width: 1px; left: 767px; width: 150px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu41()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre dor</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU5" onmouseover="displayMenu51()"
 style="border-width: 1px; left: 915px; width: 80px; position: absolute; top: 5px; height: 50px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu51()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="50"
 width="80">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenuOut"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU11" onmouseover="displayMenu11()"
 style="border-width: 1px; left: 323px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 180px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu11()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="180"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mescreationstekken.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations Tekken</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mescreationsdiverses.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes creations diverses</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mestracts.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes tracts</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mesbannieres.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes bannieres</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/meshorloges.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes horloges</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/mesvideos.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mes videos</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/divers.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Divers</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='im/plus.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>plus</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU21" onmouseover="displayMenu21()"
 style="border-width: 1px; left: 471px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu21()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='tel/monblog.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Mon blog</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="javascript:displayMenu21_2();"
 onmouseout="javascript:hideMenu21_2();" bgcolor="#ffffff">
      <center>Mon forum</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='tel/monforum.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Site "Association Aidons Nos Molosses</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU31" onmouseover="displayMenu31()"
 style="border-width: 1px; left: 619px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu31()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='mul/telechargement1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='mul/telechargement2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Telechargement 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU41" onmouseover="displayMenu41()"
 style="border-width: 1px; left: 767px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu41()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='hyp/livreor1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre d'or 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='hyp/livreor2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Livre d'or 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div id="ID_MENU51" onmouseover="displayMenu51()"
 style="border-width: 1px; left: 915px; visibility: hidden; width: 150px; position: absolute; top: 53px; height: 60px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"
 onmouseout="hideMenu51()" z-index:1="">
<table bgcolor="#aa0000" border="0" height="60"
 width="150">
  <tbody>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='link/contact1.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact 1</center>
      </td>
    </tr>
    <tr>
      <td onmouseover="this.bgColor=colorMenu"
 onclick="location='link/contact2.html'"
 onmouseout="this.bgColor=colorMenuOut" bgcolor="#ffffff">
      <center>Contact 2</center>
      </td>
    </tr>
  </tbody>
</table>
</div>
<br style="color: rgb(255, 0, 0);">
<br>
</body>
</html>

fichier script

Code : Tout sélectionner

// VARIABLES GLOBALES


	// Largeur de la fenetre
	var winWidth;

	// Largeur des elts du menu
	var accW = 80;
	var imW = 150;
	var specW = 150;
	var mulW = 150;
	var hypW = 150;
	var linkW = 80;
	var totalW = accW+imW+specW+mulW+hypW+linkW;

	// Position en X des elts du menu
	var accX;
	var imX;
	var specX;
	var mulX;
	var hypX;
	var linkX;
		
	// Couleur du fond
	var bgColor = "#EEEEEE";
	
	
	// Couleur des cases du menu onMouseOn
	var colorMenu = "#777777";
	// Couleur des cases du menu onMouseOut
	var colorMenuOut = "#FFFFFF";
	// Couleur des tableaux
	var colorMenuBorder = "#AA0000";



// INITIALISER LA PAGE
function init()
{
		initValues();
		displayMenu();
		initMenu();
}


// INITIALISER LES VALEURS
function initValues()
{
	winWidth = document.body.clientWidth;
			
	// Position en X des elts du menu
	accX = winWidth/2 - totalW/2 ;
	imX = accX+accW-2;
	specX = imX+imW-2;
	mulX = specX+specW-2;
	hypX = mulX+mulW-2;
	linkX = hypX+hypW-2;		
}


// INIT MENU : cache les sous menu

function initMenu() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='hidden';
       document.all.ID_MENU21.style.visibility='hidden';
       document.all.ID_MENU21_2.style.visibility='hidden';
       document.all.ID_MENU31.style.visibility='hidden';
       document.all.ID_MENU41.style.visibility='hidden';
       document.all.ID_MENU51.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='hidden';
       document.getElementById('ID_MENU31').style.visibility='hidden';
       document.getElementById('ID_MENU21').style.visibility='hidden';
       document.getElementById('ID_MENU21_2').style.visibility='hidden';
       document.getElementById('ID_MENU41').style.visibility='hidden';
       document.getElementById('ID_MENU51').style.visibility='hidden';
  }
}



// DESSIN DU MENU
function displayMenu()
{
// MENU PRINCIPAL

	document.write(	"<DIV ID='ID_MENU0' style=\"position: absolute; left:"+accX+"px; top:5px; width:"+accW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 >");
	document.write(	"	<TABLE  BORDER='0' WIDTH='80'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"javascript:window.location='pageaccueil.html'\"  BGCOLOR="+colorMenuOut+"><CENTER>Accueil</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU1' style=\"position: absolute; left:"+imX+"px; top:5px; width:"+accW+"px; height:50px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu11()' onmouseout='hideMenu11()'>"); 
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Mes
Creations
</CENTER></TD>");
	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU2' style=\"position: absolute; left:"+specX+"px; top:5px; width:"+specW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21()' onmouseout='hideMenu21()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Mes Liens</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU3' style=\"position: absolute; left:"+mulX+"px; top:5px; width:"+mulW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu31()' onmouseout='hideMenu31()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Telechargements</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU4' style=\"position: absolute; left:"+hypX+"px; top:5px; width:"+hypW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu41()' onmouseout='hideMenu41()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Livre d'or</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


	document.write(	"	<DIV ID='ID_MENU5' style=\"position: absolute; left:"+linkX+"px; top:5px; width:"+linkW+"px; height:50px;  border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu51()' onmouseout='hideMenu51()'>");
	document.write(	"	<TABLE  BORDER='0' WIDTH='80'  HEIGHT='50' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenuOut\" onmouseout=\"this.bgColor=colorMenuOut\"   BGCOLOR="+colorMenuOut+"><CENTER>Contact</CENTER></TD>");

	document.write(	"		</TR>");
	document.write(	"	</TABLE>");
	document.write(	"</DIV>");


//<!-- SOUS MENU POUR LES DIFFERENTS TYPES Mes Creations> -->

	document.write(	"	<DIV ID='ID_MENU11' style=\"position: absolute; left:"+imX+"px; top:53px; width:150px; height:180px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu11()' onmouseout='hideMenu11()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='180' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mescreationstekken.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Creations Tekken</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mescreationsdiverses.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Creations Diverses</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mestracts.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Tracts</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mesbannieres.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Bannieres</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/meshorloges.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Horloges</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/mesvideos.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Videos</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/divers.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Divers</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='im/plus.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Plus</CENTER>");
	document.write(	"			</TD>");
			
	document.write(	"		</TR>");
	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Mes Liens -->

	document.write(	"	<DIV ID='ID_MENU21' style=\"position: absolute; left:"+specX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21()' onmouseout='hideMenu21()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/monblog.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mon Blog</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/monforum.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mon Forum</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/siteassociationaidonsnosmolosses.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Site Association "Aidons Nos Molosses"</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Telechargements> -->

	document.write(	"	<DIV ID='ID_MENU31' style=\"position: absolute; left:"+mulX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu31()' onmouseout='hideMenu31()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='mul/telechargement1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Telechargement 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='mul/telechargement2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Telechargement 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");



//<!-- SOUS MENU POUR LES IMAGES Livre d'or> -->

	document.write(	"	<DIV ID='ID_MENU41' style=\"position: absolute; left:"+hypX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu41()' onmouseout='hideMenu41()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='hyp/livreor1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Livre d'or 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='hyp/livreor2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Livre d'or 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");


//<!-- SOUS MENU POUR LES Contact -->

	document.write(	"	<DIV ID='ID_MENU51' style=\"position: absolute; left:"+linkX+"px; top:53px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu51()' onmouseout='hideMenu51()'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='link/contact1.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Contact 1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='link/contact2.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Contact 2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");

	document.write(	"<BR><BR><BR><BR>	");



//<!-- SOUS SOUS MENU POUR LES Mes Liens 2 -->

	var satX = specX+specW-2;
	document.write(	"	<DIV ID='ID_MENU21_2' style=\"position: absolute; left:"+satX+"px; top:77px; width:150px; height:60px; border-width:1; background-color='#FFFFFF'\" z-index:1 onmouseover='displayMenu21_2();displayMenu21();' onmouseout='hideMenu21_2();hideMenu21();'>");

	document.write(	"	<TABLE  BORDER='0' WIDTH='150'  HEIGHT='60' BGCOLOR="+colorMenuBorder+">");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens21.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.1</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens22.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.2</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens23.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.3</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");
	document.write(	"		<TR>");
	document.write(	"			<TD onmouseover=\"this.bgColor=colorMenu\" onmouseout=\"this.bgColor=colorMenuOut\" onClick=\"location='tel/mesliens24.html'\"  BGCOLOR="+colorMenuOut+">");
	document.write(	"				<CENTER>Mes Liens 2.4</CENTER>");
	document.write(	"			</TD>");
	document.write(	"		</TR>");

	document.write(	"	</TABLE>");

	document.write(	"</DIV>");




}


// FONCTIONS POUR LES TYPES Mes Creations

function displayMenu11() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='visible';
  }
}		

	
function hideMenu11() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU11.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU11').style.visibility='hidden';
  }
}


// FONCTIONS POUR Mes Liens

function displayMenu21() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU21').style.visibility='visible';
  }
}		

	
function hideMenu21() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU21').style.visibility='hidden';
  }
}



// FONCTIONS POUR Telechargements

function displayMenu31() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU31.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU31').style.visibility='visible';
  }
}		

	
function hideMenu31() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU31.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU31').style.visibility='hidden';
  }
}



// FONCTIONS POUR Livre d'or

function displayMenu41() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU41.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU41').style.visibility='visible';
  }
}		

	
function hideMenu41() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU41.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU41').style.visibility='hidden';
  }
}


// FONCTIONS POUR Contact

function displayMenu51() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU51.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU51').style.visibility='visible';
  }
}		

	
function hideMenu51() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU51.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU51').style.visibility='hidden';
  }
}


// FONCTIONS POUR Mes Liens 2

function displayMenu21_2() 
{                     
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21_2.style.visibility='visible';
  }
  else
  {
       document.getElementById('ID_MENU21_2').style.visibility='visible';
  }
}		

	
function hideMenu21_2() 
{                    
  if (navigator.appName=='Microsoft Internet Explorer')
  {
       document.all.ID_MENU21_2.style.visibility='hidden';
  }
  else
  {
       document.getElementById('ID_MENU21_2').style.visibility='hidden';
  }
}

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)

Puisque tu débutes ton site, il serait peut-être bon de faire un site sans tableau ce qui présente l'avantage d'être maintenable, évolutif,...

Pour les menus déroulants, cela se fait très bien en CSS, avec éventuellement un petit javascript pour le rendre compatible avec les navigateurs ne respectant pas les normes et standard comme IE.
L'avantage, c'est qu'on peut faire de simples menus sous forme de liste html dans un premier temps, puis on complète le css pour le rendre déroulant et finalement on ajoute le javascript.
Mais dès la 1ere étape on a quelque chose d'opérationnelle qui correspondra à la vision de ceux (10 à 15%) qui désactivent le javascript.

Fabrice.Tres.Net a écrit :Mais dès la 1ere étape on a quelque chose d'opérationnelle qui correspondra à la vision de ceux (10 à 15%) qui désactivent le javascript.

Je me demande, avec l'AJAX c'est encore vivable de surfer sur le net sans JS ?

Pour le reste, c'est quand même mieux de faire un menu en CSS. Surtout que c'est très largement faisable. Puis il y n'a pas de support de IE6, tu peux toujours milité contre la mort de ce navigateur antédiluvien.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)

malheureusement je ne suis pas non plus tres fort en feuille css

si quelqu'un est capable de me l'editer je suis preneur

pour ce qui est des menus simple, j'avais reussis a en faire un en vertical, avec quelques sous menus, mais il faut que je clique 2 a 3 fois sur le "menu parent" pour afficher les sous menus ( si vous avez une solutions pour ca aussi je suis preneur)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)

Beurk, c'est bien le pire menu déroulant que l'on puisse faire avec tableaux et détections de navigateurs !

Un petit tuto pour un menu tout simple mais efficace :
http://tutorials.alsacreations.com/deroulant/

PS : il existe toujours une portion d'utilisateurs qui ne peuvent pas avoir accès à javascript, pour diverses raisons, ou que ça gêne particulièrement. Le fait que plein de sites utilisent ajax n'est pas une raison pour que son propre site ne soit pas accessible

Salut,

+1 pour le lien pointé par Calimo. Si tu ne maîtrises pas tous les aspects du développement, ce qui est compréhensible, fais confiance à des ressources de qualité (et Alsacreations en est une)

Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)

Asumbaa a écrit :Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.

euh désolé à quel endroit, sur le fichier script ou le html ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)

tekken a écrit :
Asumbaa a écrit :Modération :
Pourras-tu éditer ton premier message et rajouter des balises "code" autour de tes codes, car là comme tu peux le constater, c'est pas très lisible. Merci.
euh désolé à quel endroit, sur le fichier script ou le html ?

Les deux

Je l'ai fait pour toi, du coup.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 (.NET CLR 3.5.30729)

merci calimo pour ton lien qui m'a permis de realiser mon menu

maintenant si je veux rajouter des "sous menus" au "sous menus" que faut il que je rajoute dans ma feuille css ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)

Faire des sous-sous-menus (si j'ai bien compris) n'est certainement pas une bonne idée, c'est beaucoup trop compliqué, tu devrais plutôt t'efforcer de simplifier l'organisation de ton site.

Si c'est strictement nécessaire, tu dois adopter la même stratégie, à savoir que le bloc est caché au démarrage, puis affiché au survol de l'élément correspondant du sous-menu

non ce n'est pas du tout obligatoire, c'était surtout pour apprendre a le faire (pour mes connaissance perso) mais si c'est vraiment trop compliquer je ne vais pas chercher plus loin.

pour information sinon c'est bien juste dans la feuille de style qu'il faut travailler ou faut il adapter un script ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)

Cela dépend du script.
Je vois que le lien que je t'ai donné n'est malheureusement plus valable, donc je ne sais pas te dire comme ça. Est-ce que ta page est en ligne pour regarder ?

A défaut du tuto retiré de chez alsacreations, en voici un autre, très "mode" ces derniers temps: http://www.alsacreations.com/actu/lire/ ... lants.html

voila le lien : http://creationtekken.gofreeserve.com/

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)

Je pense qu'en procédant exactement de la même façon, c'est à dire en définissant les javascript:show('smenuX'); avec les id correspondant dans les sous-menus, ça devrait fonctionner. Mais le meilleur moyen de le savoir, c'est d'essayer

Geckozone

Probleme avec menu deroulant

Probleme avec menu deroulant