|
Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
MENU AVEC EFFET DE FADING
Information sur la source
Description
Les cellules du menu changent de couleur avec un effet de dégradé, la vitesse et les couleurs sont paramétrables.
Source
- <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>
<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!!
Sources de la même categorie
Commentaires et avis
|
Comparez les prix Nouvelle version
|