Menu avec effet de fading

Commenter

Contenu du snippet

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">&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!!

A voir également

S'inscrire maintenant

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.