11548 sujets

JavaScript, DOM et API Web HTML5

Positionnement menu + propriétés

Bonjour à tous,

Alors je vous présente mon problème. Je suis GRAND débutant en javascript et je suis bloqué. J'ai un script me permettant de mettre en place mon menu :

"ejs_menu_dyn_vert.js"


bgcolor='#000000';
bgcolor2='#FFFFFF';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
document.write('#topgauche { position:absolute;  z-index:10; }')
document.write('a:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');

/*
LIENS
*/
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[4] = new Array;
zlien[5] = new Array;
zlien[0][0] = '<A HREF="#nogo" CLASS=ejsmenu>Paysages</A>';
zlien[0][1] = '<A HREF="#nogo" CLASS=ejsmenu>Familles</A>';
zlien[0][2] = '<A HREF="" CLASS=ejsmenu>Copains</A>';
zlien[0][3] = '<A HREF="#nogo" CLASS=ejsmenu>Divers</A>';
zlien[1][0] = '<A HREF="#nogo" CLASS=ejsmenu>Electro</A>';
zlien[1][1] = '<A HREF="" CLASS=ejsmenu>Groove</A>';
zlien[2][0] = '<A HREF="#nogo" CLASS=ejsmenu>Divers</A>';
zlien[3][0] = '<A HREF="#nogo" CLASS=ejsmenu>Banières</A>';
zlien[3][1] = '<A HREF="#nogo" CLASS=ejsmenu>Wallpapers</A>';
zlien[4][0] = '<A HREF="#nogo" CLASS=ejsmenu>Site Web</A>';
zlien[4][1] = '<A HREF="#nogo" CLASS=ejsmenu>Multimédia</A>';
if(document.getElementById)
	{
	skn = document.getElementById("topdeck").style
	skn.left = 99;
	}

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.top = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#FFFFFF WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
	{
	content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Courrier\"><B>&nbsp;&nbsp;"+msg[pass]+"</B></FONT></TD></TR>";
	pass++;
	}
content += "</TABLE></TD></TR></TABLE>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
function kill()
{
	if(document.getElementById)
		skn.visibility = "hidden";
}
document.onclick = kill;
if(document.getElementById)
	{
	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#FFFFFF WIDTH=100 HEIGHT=120><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=120>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Photos</B></FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Musiques</B></FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Vidéos</B></FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],60)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Graphismes</B></FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],80)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Projets</B></FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],100)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Courrier"><B>Divers</B></FONT></TD></tr>')
	document.write('</TABLE></TD></TR></TABLE></DIV>')
	}
document.write('</div>');



Et donc je le place dans mon html : 

<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert.js"></SCRIPT>


Ca fonctionne jusque là, mais mon problème est que je n'arrive pas à définir ou redéfinir certains paramètres. Car en faite l'obectif est de l'introduire dans une autre page ayant déjà une css. Bref je veut modifier :

--> La couleur de fond : noir
--> Le texte en blanc avec fond noir (menu non survolé)
--> Le texte en noir avec fond blanc (menu survolé)
--> et surtout je n'arrive pas à positionner mes liens au survol à droite de mes boutons déjà existant. Ils viennent par dessus et je n'arrive pas à les placer correctement.

Voilà si quelqu'un pouvait m'aider Smiley biggrin

Merci d'avance

@bientot
a écrit :
Car en faite l'obectif est de l'introduire dans une autre page ayant déjà une css

Tu pourrais utiliser un des meunu en css qui se trouve sur alsacreations ICI

A+
Impecable .. j'ai tout ce qu'il me faut Smiley smile

Merci beaucoup Smiley biggrin Smiley biggrin Smiley cligne
Modifié par kinay (05 Feb 2008 - 15:32)
Sujet clos
Aller à