Menu avec effet de fading

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 660 fois - Téléchargée 31 fois

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

Ajouter un commentaire Commentaires
cs_Romain128 Messages postés 89 Date d'inscription mercredi 9 mars 2005 Statut Membre Dernière intervention 7 novembre 2005
14 avril 2005 à 17:53
Il marche pas sous Gecko, mais marche sur IE. Come tu l'a dis, les cellules se bloquent parfois...
7/10.
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
15 avril 2005 à 01:49
L'idée est bonne et l'effet super,mais avec quelque problème. 8/10.
cs_volnay Messages postés 12 Date d'inscription jeudi 17 juin 2004 Statut Membre Dernière intervention 24 mai 2006
15 avril 2005 à 09:46
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?
cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009
15 avril 2005 à 12:38
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
Gorrk Messages postés 96 Date d'inscription mercredi 16 avril 2003 Statut Membre Dernière intervention 26 avril 2007
15 avril 2005 à 15:02
Salut, j'ai pas trop regarder, mais un petit width:100% dans le css ca rendrait tout de suite un peu mieux.
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.