javascript pour menu XHTML

[coolsteven]

Bonjour,

voici ci-dessous un javascript que j'ai realise qui utilise les DOM

il sert a rendre dynamique un menu en ajoutant des omouseover et onmouseout au menu XHTML

il fonctionne trés bien sur IE6 et firefox mais pas sous IE5 et IE5.5

quelqu'un a t'il une idée ?

merci

// *--- debut variables a modifier par l'utilisateur--- * //
//nom des pages à ouvrir
forum="forum.htm"
shop="shop.htm"

//quel menu 'middle_' ou 'header_' ?
menu="middle_"
// *--- fin variables a modifier par l'utilisateur--- * //


// designation de la zone a scanner
var cible = document.getElementById(menu+'nav')

//recensement de tous les elements a de la zone cible uniquement
if (document.getElementsByTagName)
	var x = cible.getElementsByTagName('a');


//recensement de tous les elements ul de la zone cible uniquement
if (document.getElementsByTagName)
	var z = cible.getElementsByTagName('ul');

var m
var compt
//selection des ul des sous menus uniquement et affectation de leurs evenements 
for (var i=0;i<z.length;i++)
{
if (z[i].getAttributeNode("id") && z[i].getAttributeNode("id").value!="") { 
z[i].onmouseout = function() {compt=setTimeout("document.getElementById(m+'s').style.display='none';document.getElementById(m).className='middle_nav_notselected'",temps)}
z[i].onmouseover = function() {clearTimeout(compt)}
}
}

n=0
temps=1000
//selection des liens du menu de niveau 1 et affectation de leurs evenements 
for (var i=0;i<x.length;i++)
{
if (x[i].getAttributeNode("id") && x[i].getAttributeNode("id").value!="") {
valeurid=x[i].getAttributeNode("id").value
n++
recherche=valeurid.indexOf('smenu',0)
if (recherche==-1) {ms=recherche;x[i].onclick = function() {init();m=this.getAttributeNode("id").value; document.getElementById(m+"s").style.display='block';document.getElementById(m).className='middle_nav_selected'}}
if (recherche==-1) {ms=recherche;x[i].onmouseout = function() {compt=setTimeout("document.getElementById(m+'s').style.display='none';document.getElementById(m).className='middle_nav_notselected'",temps)}}
if (recherche==-1) {ms=recherche;x[i].onmouseover = function() {clearTimeout(compt)}}
}
}

//initialisation du menu (cache tous les sous menus)
function init() {
	for (var i = 1; i<=n; i++) {
		if (document.getElementById(menu+'menu'+i+'s')) {document.getElementById(menu+'menu'+i+'s').style.display='none';document.getElementById(menu+'menu'+i).className='middle_nav_notselected'}
	}
tc=1
}










  <div id="middle_nav">
	  <ul>
<li><a href="#" id="middle_menu1">Squaliformes</a>
	<ul id="middle_menu1s">
		<li><a href="#">Echinorhinidés Echinorhinidés Echinorhinidés</a></li>
		<li><a href="#">Oxynotidés Echinorhinidés Echinorhinidés</a></li>

		<li><a href="#">Squalidés</a></li>
	</ul>
</li>

<li><a href="#" id="middle_menu2">Orectolobiformes</a>
	<ul id="middle_menu2s">
		<li><a href="#">Parascylliidés</a></li>
		<li><a href="#">Brachaeluridés</a></li>

		<li><a href="#">Orectolobidés</a></li>
		<li><a href="#">Stégostomatidés</a></li>
		<li><a href="#">Hémiscylliidés</a></li>
	</ul>
</li>


	<li><a href="#" id="middle_menu3">Carcharhiniformes</a>
		<ul id="middle_menu3s">

			<li><a href="#">Scyliorhinidés</a></li>
			<li><a href="#">Proscylliidés</a></li>

			<li><a href="#">Pseudotriakidés</a></li>
			<li><a href="#">Leptochariidés</a></li>
			<li><a href="#">Hémigaléidés</a></li>
			<li><a href="#">Triakidés</a></li>

			<li><a href="#">Sphyrnidés</a></li>
			<li><a href="#">Carcharhinidés</a></li>

		</ul>
	</li>
</ul>
        </div>

[modérateur: pour beaucoup de code, merci d'utiliser les codebox]

Modifié 7 Septembre 2005 par Loupilo

[Loupilo]

Si ton code est sur une page que tu peux visiter avec Firefox, je te conseille de l'afficher, survoler ton menu, et une fois après avoir constaté que ça ne fonctionnait pas, rendre visite à la Console JavaScript (Outils/Console JavaScript).

Je ne connais presque rien en JavaScript mais le message d'erreur t'aidera surement.