new!
|
|
|
 |
| > Coloration menu dynamique |
[ Posté par Domi_94 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 14-03-2008 à 14:54 | 2 messages ]
Bonjour,
Voici mon script (très inspiré du script http://www.editeurjavascript.com/scripts/scripts_navigation_1_111.php) :
<html>
<body>
<script type="text/javascript">
bgcolor='#7b7b7b';
bgcolor2='#ffffff';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
document.write('#topgauche { position:absolute; z-index:10; }')
document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}')
document.write('A.ejsmenu {color:#000000; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[0][0] = '<A HREF="a.html" CLASS=ejsmenu>Accueil</A>';
zlien[1][0] = '<A HREF="a.html" CLASS=ejsmenu>Championnat</A>';
zlien[1][1] = '<A HREF="a.html" CLASS=ejsmenu>Coupe de France</A>';
zlien[1][2] = '<A HREF="a.html" CLASS=ejsmenu>Open</A>';
zlien[2][0] = '<A HREF="a.html" CLASS=ejsmenu>En quelques mots</A>';
zlien[3][0] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 1</A>';
zlien[3][1] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 2</A>';
zlien[3][3] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 3</A>';
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = 24;
function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.left = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 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=\"Verdana\"> "+msg[pass]+"</FONT></TD></TR>";
pass++;
}
content += "</TABLE></TD></TR></TABLE>";
if (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (dom)
{
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}
function kill()
{
skn.visibility = "hidden";
}
document.onclick = kill;
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=400><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#00ccff\' onMouseOver="this.style.background=\'#00ccff\';pop(zlien[0],0)" onMouseOut="this.style.background=\'#00ccff\'"><A onClick="return(false)" onMouseOver="pop(zlien[0],0)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Accueil</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#00cc00\' onMouseOver="this.style.background=\'#00cc00\';pop(zlien[1],100)" onMouseOut="this.style.background=\'#00cc00\'"><A onClick="return(false)" onMouseOver="pop(zlien[1],100)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Saison 07-08</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#ffcc00\' onMouseOver="this.style.background=\'#ffcc00\';pop(zlien[2],200)" onMouseOut="this.style.background=\'#ffcc00\'"><A onClick="return(false)" onMouseOver="pop(zlien[2],200)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">L\'Association</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#ff3333\' onMouseOver="this.style.background=\'#ff3333\';pop(zlien[3],300)" onMouseOut="this.style.background=\'#ff3333\'"><A onClick="return(false)" onMouseOver="pop(zlien[3],300)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Exercices</FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE></DIV></div>')
</script>
</body>
</html> |
|
Tout fonctionne parfaitement dans ce script.
Vous verrez qu'au passage de la souris dans les sous-menus, la couleur de fond passe au blanc tandis la couleur de fond des sous-menus inactif restent gris.
Je voudrais juste que ces sous-menus inactifs aient la même couleur de fond que le titre correspondant :
Pour 'Accueil', je voudrais que les sous-menus inactifs soient bleus (#00ccff);
Pour 'Saison 07-08', je voudrais que les sous-menus inactifs soient verts (#00cc00);
Pour 'Association', je voudrais que les sous-menus inactifs soient orange (#ffcc00)...
Comment faire ?
Merci d'avance pour le coup de pouce.
________________
Dom
|
|
|
|
[ Posté par rf92 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 15-03-2008 à 07:38 | 578 messages ]
|
bonjour,
voici un code modifié :
<html>
<body>
<style type="text/css">
.fond00ccff { background-color: #00ccff; }
.fond00cc00 { background-color: #00cc00; }
.fondffcc00 { background-color: #ffcc00; }
.fondff3333 { background-color: #ff3333; }
</style>
<script type="text/javascript">
bgcolor='#7b7b7b';
bgcolor2='#ffffff';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
document.write('#topgauche { position:absolute; z-index:10; }')
document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}')
document.write('A.ejsmenu {color:#000000; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[0][0] = '<A HREF="a.html" CLASS=ejsmenu>Accueil</A>';
zlien[1][0] = '<A HREF="a.html" CLASS=ejsmenu>Championnat</A>';
zlien[1][1] = '<A HREF="a.html" CLASS=ejsmenu>Coupe de France</A>';
zlien[1][2] = '<A HREF="a.html" CLASS=ejsmenu>Open</A>';
zlien[2][0] = '<A HREF="a.html" CLASS=ejsmenu>En quelques mots</A>';
zlien[3][0] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 1</A>';
zlien[3][1] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 2</A>';
zlien[3][3] = '<A HREF="a.html" CLASS=ejsmenu>Exercice 3</A>';
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = 24;
function pop(msg,pos,couleur)
{
z_couleur = "fond"+couleur;
skn.visibility = "hidden";
skn.left = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
{
content += "<TR><TD class="+z_couleur+" BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\"> "+msg[pass]+"</FONT></TD></TR>";
pass++;
}
content += "</TABLE></TD></TR></TABLE>";
if (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (dom)
{
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}
function kill()
{
skn.visibility = "hidden";
}
document.onclick = kill;
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=400><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#00ccff\' onMouseOver="this.style.background=\'#00ccff\';pop(zlien[0],0,\'00ccff\')" onMouseOut="this.style.background=\'#00ccff\'"><A onClick="return(false)" onMouseOver="pop(zlien[0],0,\'00ccff\')" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Accueil</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#00cc00\' onMouseOver="this.style.background=\'#00cc00\';pop(zlien[1],100,\'00cc00\')" onMouseOut="this.style.background=\'#00cc00\'"><A onClick="return(false)" onMouseOver="pop(zlien[1],100,\'00cc00\')" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Saison 07-08</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#ffcc00\' onMouseOver="this.style.background=\'#ffcc00\';pop(zlien[2],200,\'ffcc00\')" onMouseOut="this.style.background=\'#ffcc00\'"><A onClick="return(false)" onMouseOver="pop(zlien[2],200,\'ffcc00\')" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">L\'Association</FONT></a></TD>')
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR=\'#ff3333\' onMouseOver="this.style.background=\'#ff3333\';pop(zlien[3],300,\'ff3333\')" onMouseOut="this.style.background=\'#ff3333\'"><A onClick="return(false)" onMouseOver="pop(zlien[3],300,\'ff3333\')" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana">Exercices</FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE></DIV></div>')
</script>
</body>
</html> |
|
j'ai ajouté 4 css pour les différents styles.
J'ai ajouté la couleur en paramètre dans chaque appel de la fonction et dans la fonction même.
a+
ps : j'ai aussi viré le "a=true" qui ne sert à rien 
________________
rf92
A Begwalewe, près de Serule au Botswana, Galetwaselwe Mossi a volé une vache à Sir Seretse Khama. On vous fait grâce du nom de la vache.
Pierre Desproges
| [ Posté par Domi_94 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 17-03-2008 à 08:29 | 2 messages ]
Salut rf92,
Merci pour ton aide, c'est pile ce que je souhaitais !
----------------
A bientôt
________________
Dom
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
