Accueil > > > MENU AVEC EFFET DE FADING
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
MENU VERTICALE GAUCHE ET DROIT DEROULANTMENU VERTICALE GAUCHE ET DROIT DEROULANTc'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrand...
par kazma
MENU VERTICALE EN TRANSPARENCEMENU VERTICALE EN TRANSPARENCECe menu est complètement modifiable, les fenêtres de sous menus étant composées de plusieur images, vous pouvez modifier la taille des sous menus en...
par dlvains
MENU DÉROULANT EN IMAGESMENU DÉROULANT EN IMAGES un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pe...
par dlvains
TBFRAME: TAB BROWSING FRAMETBFRAME: TAB BROWSING FRAME Cela fait un moment que j'avais eu l'idée de mettre en ligne ce script, mais je n'avais jamais eu le temps de mettre un coup de propre dans le code ai...
par triumphs
MENU PRINCIPALMENU PRINCIPALBonjour, dans ce petit source, j'ai met une belle menu avec php,javascript, css, pour me contactet , ABOUSSEBABA ALI <contact@aliwebmaster.com>, à vou...
par ali1987
Commentaires et avis
|
Derniers Blogs
FAIRE APPARAITRE L'ONGLET 'DéVELOPPEUR' DANS OFFICE 2010FAIRE APPARAITRE L'ONGLET 'DéVELOPPEUR' DANS OFFICE 2010 par neodante
La nouvelle interface d'Office 2010 à amener quelques modifications par rapport à celle de 2007. Certes mineures, ces modifications ont fait disparaître la case à cocher de l'onglet 'Développeur' en première page du panneau du 'bouton Office' (dans Office...
Cliquez pour lire la suite de l'article par neodante [ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1 par pierre
Si vous avez téléchargé comme moi Microsoft Forums NNTP Bridge V1 avant le 11 mars 2010 (voir [Astuce] Disponibilité de Microsoft Forum NNTP Bridge Version 1.0), un problème de date localisée pour les non anglais était présent. Un patch est disponibl...
Cliquez pour lire la suite de l'article par pierre PB LORS DE L'INSTALLATION SHAREPOINT 2010.PB LORS DE L'INSTALLATION SHAREPOINT 2010. par Patrick Guimonet
Lors de l'installation de SharePoint 2010, j'ai rencontré un problème de plantage à l'étape 5 du configuration Wizard. Ca se termine sur cet écran : Et en analysant le fichier de journalisation, on remarque vers la fin des 15000 et quelques lign...
Cliquez pour lire la suite de l'article par Patrick Guimonet [WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2)[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2) par JeremyJeanson
Après mon précédent article qui attaque les contraintes par la fasse Nord de l'Everest. passons à la seconde possibilité offerte par WF4 pour valider une activité : la metadata . Je vous en ai déjà toucher un ou deux mots. La metadata dans WF4 est un élém...
Cliquez pour lire la suite de l'article par JeremyJeanson [WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2)[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2) par JeremyJeanson
De WF3 à WF4 pas mal de choses on été changées pour faciliter la vie des développeurs, mais certain points peuvent sembler obscures. comme les contraintes. Pour vous guider, je me lance dans une série de deux articles. Ils présenterons deux approches poss...
Cliquez pour lire la suite de l'article par JeremyJeanson
Forum
SLTSLT par kurapikt
Cliquez pour lire la suite par kurapikt
Logiciels
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
|