Menu avec effet de fading

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 339 fois - Téléchargée 29 fois

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

SiZiOUS
Messages postés
69
Date d'inscription
samedi 25 octobre 2003
Statut
Membre
Dernière intervention
29 novembre 2006
-
Je ne pense pas qu'un dégradé soit possible en CSS. Ou peut être avec une propriété que je ne connais pas.
cs_volnay
Messages postés
12
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
24 mai 2006
-
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
catloup
Messages postés
2
Date d'inscription
lundi 18 avril 2005
Statut
Membre
Dernière intervention
18 avril 2005
-
sa ne marche pas
Gorrk
Messages postés
96
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
-
Salut, j'ai pas trop regarder, mais un petit width:100% dans le css ca rendrait tout de suite un peu mieux.
cs_jjdagadir
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009
-
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

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.