CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 04:28:45

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU AVEC EFFET DE FADING

Information sur la source

Note :

7,00 / 10

Catégorie :Menu & Co Niveau :Initié Date de création :14/04/2005 Vu :7 864

Auteur : volnay

Ecrire un message privé

Commentaire sur cette source (8)

Ajouter un commentaire et/ou une note

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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;<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

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de Romain128 le 14/04/2005 17:53:34

Il marche pas sous Gecko, mais marche sur IE. Come tu l'a dis, les cellules se bloquent parfois...
7/10.

Commentaire de Arto_8000 le 15/04/2005 01:49:45

L'idée est bonne et l'effet super,mais avec quelque problème. 8/10.

Commentaire de volnay le 15/04/2005 09:46:04

Merci pour vos commentaires. Pour les autres browser, effectivement j'ai regardé que pour IE.
Pour le Bug: ça bloque si on demande en même temps à deux cellules de revenir à la couleur d'origine. Une solution serait de faire une fonction pour chaque bouton mais c'est pas trés elegant et factorisé. J'ai l'impression que les SetTimeout ne s'empilent pas comme il le faudrait, ou un probleme de scope de variable?

Commentaire de jjdagadir le 15/04/2005 12:38:41

Ouais, c'est beaucoup de code, du boulot, du temps...
c'est bien d'essayer et çà marche, mais, mais pourquoi compliquer ce qui pourrait être simple avec deux ou trois lignes de CSS ? Aller, je note pas car entre l'encouragement et le découragement j'arrive pas à choisir.
Continue à coder quand même.
Kenavo

Commentaire de Gorrk le 15/04/2005 15:02:14

Salut, j'ai pas trop regarder, mais un petit width:100% dans le css ca rendrait tout de suite un peu mieux.

Commentaire de catloup le 18/04/2005 22:39:24

sa ne marche pas

Commentaire de volnay le 19/04/2005 09:50:03

réponse à catloup : lit les posts + haut, je l'ai testé pour IE5.5 et + ;
réponse à jjdagadir : je suis intéressé par tes 3 lignes de css qui font pareil
Salut

Commentaire de SiZiOUS le 04/02/2006 23:27:33

Je ne pense pas qu'un dégradé soit possible en CSS. Ou peut être avec une propriété que je ne connais pas.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System