Les cellules du menu changent de couleur avec un effet de dégradé, la vitesse et les couleurs sont paramétrables.
Source / Exemple :
<html>
<head>
<STYLE type="text/css">
<!--
A
{
text-decoration:none ;
font-family: verdana, helvetica, sans-serif;
font-size: 14px;
}
A:hover { color:#F5F5DC; }
-->
</STYLE>
<title>menu</title>
<SCRIPT LANGUAGE="Jscript">
var backcolorfinale = "#1000DF"; // couleur de fond finale de la cellule en status ONMOUSE
var speedexec = 20; // vitesse du changement des couleurs
var echantillonage = 30; // nombre de pas du dégradé
var nbrBouton = 6 // nombre de bouton du menu
var lemenu = new Array(nbrBouton);
function activecouleur(kelbto, lacel)
{
acolorHEX = lacel.backgroundColor
lemenu[kelbto].boucle = 1
lemenu[kelbto].originRR = parseInt (acolorHEX.slice(1,3),16);
lemenu[kelbto].originGG = parseInt (acolorHEX.slice(3,5),16);
lemenu[kelbto].originBB = parseInt (acolorHEX.slice(5,7),16);
lemenu[kelbto].deltaRR = CouleurCelOn.RR - (lemenu[kelbto].originRR);
lemenu[kelbto].deltaGG = CouleurCelOn.GG - (lemenu[kelbto].originGG);
lemenu[kelbto].deltaBB = CouleurCelOn.BB - (lemenu[kelbto].originBB);
fadingcolorOn(kelbto,lacel);
}
function retourcouleur(kelbto, lacel)
{
if (timer)
{
clearTimeout(setTimerOn)
}
rcolorHEX = lacel.backgroundColor
lemenu[kelbto].boucle = 1
lemenu[kelbto].originRR = parseInt (rcolorHEX.slice(1,3),16);
lemenu[kelbto].originGG = parseInt (rcolorHEX.slice(3,5),16);
lemenu[kelbto].originBB = parseInt (rcolorHEX.slice(5,7),16);
lemenu[kelbto].deltaRR = CouleurCelOut.RR - (lemenu[kelbto].originRR);
lemenu[kelbto].deltaGG = CouleurCelOut.GG - (lemenu[kelbto].originGG);
lemenu[kelbto].deltaBB = CouleurCelOut.BB - (lemenu[kelbto].originBB);
fadingcolorOff(kelbto,lacel);
}
function fadingcolorOn (kelbto, cel_tmp)
{
timer = true
if (lemenu[kelbto].boucle == (echantillonage+1))
{
return false
}
else
{
var RR = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originRR, lemenu[kelbto].deltaRR)
var GG = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originGG, lemenu[kelbto].deltaGG)
var BB = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originBB, lemenu[kelbto].deltaBB)
cel_tmp.backgroundColor = "#"+RR+GG+BB;
lemenu[kelbto].boucle = lemenu[kelbto].boucle+1
Onbouton = kelbto
Oncel = cel_tmp
setTimerOn = setTimeout("fadingcolorOn(Onbouton, Oncel)", speedexec)
}
}
function fadingcolorOff (kelbto, cel_tmp)
{
timer = false
if (lemenu[kelbto].boucle == (echantillonage+1))
{
return false
}
else
{
var RR = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originRR, lemenu[kelbto].deltaRR)
var GG = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originGG, lemenu[kelbto].deltaGG)
var BB = echantillon_HEX(lemenu[kelbto].boucle, lemenu[kelbto].originBB, lemenu[kelbto].deltaBB)
cel_tmp.backgroundColor = "#"+RR+GG+BB;
lemenu[kelbto].boucle = lemenu[kelbto].boucle+1
Offbouton = kelbto
Offcel = cel_tmp
setTimerOff = setTimeout("fadingcolorOff(Offbouton, Offcel)", speedexec)
}
}
function echantillon_HEX(boucle_tmp, origine, ledelta)
{
var tempo
tempo = Math.round(origine + ((boucle_tmp/echantillonage)*ledelta))
tempo = tempo.toString(16)
if (tempo.length < 2)
{
tempo = "0"+tempo;
}
return tempo
}
function CouleurParse(tempo)
{
this.RR = parseInt (tempo.slice(1,3),16);
this.GG = parseInt (tempo.slice(3,5),16);
this.BB = parseInt (tempo.slice(5,7),16);
}
function Init_general(cel_or)
{
timer = false
CouleurCelOn = new CouleurParse(backcolorfinale);
CouleurCelOut = new CouleurParse(cel_or);
for (var i = 0; i < nbrBouton ; i++)
{
lemenu[i] = new Obj_Bouton(1, 0, 0, 0, 0, 0, 0)
}
}
function Obj_Bouton(boucle, deltaRR, deltaGG, deltaBB, originRR, originGG, originBB)
{
this.boucle = boucle
this.deltaRR = deltaRR
this.deltaGG = deltaGG
this.deltaBB = deltaBB
this.originRR = originRR
this.originGG = originGG
this.originBB = originBB
}
</SCRIPT>
</head>
<body bgcolor="#EEEEEE" topmargin="0" leftmargin="0" link="#0000FF" vlink="#0000FF" alink="#0000FF" onload="Init_general('#EEFFFF');">
<center> <table border="1" cellpadding="0" cellspacing="0" style="border-style:Solid; border-width:2; border-collapse: collapse;" bordercolor="#111111" width="95%">
<tr>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu0"> <a href="#" onmouseover="activecouleur(0, bto_menu0.style);" onmouseout="retourcouleur(0, bto_menu0.style);">menu 0</a></td>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu1"> <a href="#" onmouseover="activecouleur(1, bto_menu1.style);" onmouseout="retourcouleur(1, bto_menu1.style);">menu 1</a></td>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu2"> <a href="#" onmouseover="activecouleur(2, bto_menu2.style);" onmouseout="retourcouleur(2, bto_menu2.style);">menu 2</a></td>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu3"> <a href="#" onmouseover="activecouleur(3, bto_menu3.style);" onmouseout="retourcouleur(3, bto_menu3.style);">menu 3</a></td>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu4"> <a href="#" onmouseover="activecouleur(4, bto_menu4.style);" onmouseout="retourcouleur(4, bto_menu4.style);">menu 4</a></td>
<td width="11%" style="background-color:'#EEFFFF';" id="bto_menu5"> <a href="#" onmouseover="activecouleur(5, bto_menu5.style);" onmouseout="retourcouleur(5, bto_menu5.style);">menu 5</a></td>
</tr></table></center>
</body>
</html>
Conclusion :
Seul problème ne pas aller trop vite avec le pointage de la souris car les cellules ne se remettent pas tout le temps à la couleur d'origine. Problème avec la fonction setTimeout je pense. Si quelqu'un à une suggestion car je ne vois pas comment m'en sortir!!
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.