Menu horizontal dynamique

[Dédé33]

Bonjour à tous,

Je souhaite réaliser pour mon futur site un menu horizontal dynamique.

Voici le lien d'un menu javascript que j'ai testé : http://www.art-y-show.org/design/testmenu.html

Sur le principe c'est ce que je désire sauf qu'il n'est pas totalement paramétrable (enfin, je crois). Ce que moi je voudrais en plus c'est remplacer les liens textes par des images : chaque bouton ayant son image "on" (quand la souris est dessus ou que le bouton a été cliqué) et son image "off" (quand la souris n'est pas dessus).

Voici le code javascript correspondant. Si quelqu'un sait comment le bidouiller merci d'avance. Sinon, si vous connaissez un autre code qui réponde aux critères ci-dessus, merci de me le communiquer, ça c'est super cool !

/* A REGLER MANUELLEMENT SI LE CADRE EST TROP PETIT */
hauteurcadre = 50;

xmenu = new Array;
xlien = new Array;

xmenu[0] = 'La page de Dédé';
xmenu[1] = 'Ma galerie';
xmenu[2] = 'Livres et vous';
xmenu[3] = 'Au fil du web';
xmenu[4] = 'Partenaires';


xlien[0] = ''
xlien[1] = ''
xlien[2] = ''
xlien[3] = ''
xlien[4] = ''
xlien[0] += '<A HREF="http://cv.fr" CLASS=menudyn3>Curriculum vitae</A>';
xlien[0] += ' | '
xlien[0] += '<A HREF="http://book.fr" CLASS=menudyn3>Book d\'articles</A>';
xlien[0] += ' | '
xlien[0] += '<A HREF="http://humeurs.fr" CLASS=menudyn3>Mes humeurs</A>';
xlien[0] += ' | '
xlien[0] += '<A HREF="http://ontaimedeja.hautetfort.com/" CLASS=menudyn3>Le blog d\'Ambre</A>';
xlien[1] += '<A HREF="http://chats.fr" CLASS=menudyn3>Chats</A>';
xlien[1] += ' | '
xlien[1] += '<A HREF="http://wm.fr" CLASS=menudyn3>Wentworth Miller</A>';
xlien[2] += '<A HREF="http://citations.fr" CLASS=menudyn3>Citations</A>';
xlien[2] += ' | '
xlien[2] += '<A HREF="http://fichememo.fr" CLASS=menudyn3>Fiche mémo</A>';
xlien[3] += '<A HREF="http://services.fr" CLASS=menudyn3>Services</A>';
xlien[3] += ' | '
xlien[3] += '<A HREF="http://jeux.fr" CLASS=menudyn3>Jeux</A>';
xlien[4] += '<A HREF="http://annuaire.fr" CLASS=menudyn3>Annuaire</A>';
xlien[4] += ' | '
xlien[4] += '<A HREF="http://banniere.fr" CLASS=menudyn3>Echange de bannières</A>';
document.write('<STYLE TYPE="text/css">\nA.menudyn3 {color:#FFFFFF; text-decoration:none;}\nA:hover.menudyn3 {color:#000000;text-decoration:none;}\n</STYLE>');

document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH='+(xlien.length*100)+' BGCOLOR=#000000>  <TR><TD><TABLE CELLPADDING=2 CELLSPACING=1 BORDER=0 WIDTH=100%>  <TR>');

for(i=0;i<xlien.length;i++)

{
	document.write('<TD BGCOLOR=#006699 onMouseOver="java script:colorIt(this);MajMenu('+i+')" ALIGN=center ID=td'+i+'><FONT SIZE=1 FACE="Verdana"><A HREF="#" onClick="return(false)" onMouseOver="MajMenu('+i+')" CLASS=menudyn3>'+xmenu[i]+'</A></FONT></TD>');
	}
document.write('</TR>  <TR>    <TD COLSPAN='+(xlien.length)+' BGCOLOR=#339900 HEIGHT='+hauteurcadre+' VALIGN=top><ilayer id="dynamenu31" width=100% height='+hauteurcadre+'><layer id="dynamenu32" width=100% height='+hauteurcadre+'><div id="dynamenu33"> </div></layer></ilayer></TD>  </TR></TABLE></TD></TR></TABLE>');

function colorIt(tditem)
	{
	if(document.all)
		{
			document.all.td0.style.background='#006699';
	document.all.td1.style.background='#006699';
	document.all.td2.style.background='#006699';
	document.all.td3.style.background='#006699';
	document.all.td4.style.background='#006699';
		tditem.style.background='#339900';
		}
else if(document.getElementById)
	{
			document.getElementById("td0").style.background='#006699';
	document.getElementById("td1").style.background='#006699';
	document.getElementById("td2").style.background='#006699';
	document.getElementById("td3").style.background='#006699';
	document.getElementById("td4").style.background='#006699';
tditem.style.background='#339900';
	}
}

function MajMenu(menu)
	{
	which = xlien[menu];
if (document.layers){
	document.dynamenu31.document.dynamenu32.document.write('<FONT SIZE=1 FACE="Verdana">'+which+'</FONT>')
	document.dynamenu31.document.dynamenu32.document.close()
	}
else if (document.getElementById)
			{
			document.getElementById("dynamenu33").innerHTML = '<CENTER><FONT SIZE=1 FACE="Verdana, Arial"><B>'+which+'</B></FONT></CENTER>';
			}
else 	if (document.all){
	dynamenu33.innerHTML=' '
	dynamenu33.innerHTML='<FONT SIZE=1 FACE="Verdana">'+which+'</FONT>';
	}
}
if (document.getElementById)
	colorIt(document.getElementById("td0"));
else if (document.all){
	colorIt(document.all.td0);
	}
MajMenu(0);

**EDIT Administrateur (TheRec)** Merci d'utiliser les BB Codes adéquats pour présenter ton code. Plus d'informations en cliquant sur "Aide BB Code" en dessous de la liste d'émoticons lors de la rédaction d'un message.

[TheRec]

Bonjour,

Sans répondre directement à ta question, je tiens juste a t'informer qu'il est possible de faire ceci en CSS sans JavaScript (ou avec une "pointe" de JavaScript pour achever les effets créées en CSS) et surtout cela permettera aux moteur de pouvoir utiliser tous les niveaux de ton menu.

Voici une démonstration : Simple drop line menu

Ensuite pour remplacer le texte de chaque élément par des images il y a beaucoup de solution à ta disposition également en CSS.

[Dédé33]

Merci pour cette info. Entre temps, j'ai trouvé un site qui a un menu de navigation tout en css et proposant les mêmes fonctionnalités que celles que je désire pour mon site. Et en plus les CSS sont accessibles donc il va m'être facile de comprendre comment ça marche.

En tout cas, merci beaucoup pour l'info.

[TheRec]

De rien, je suis content que tu aies trouvé ton bonheur, mais si ce site que tu as trouvé est accessible (gratuitement) peux-tu nous en communiquer l'adresse, cela permettra à d'autres de trouver réponses à leurs questions lors de recherches sur le forum

Merci d'avance.