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

Ce site au démarrage

begin process at 2010 03 13 22:11: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 167

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

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU VERTICALE EN TRANSPARENCE par dlvains

MENU DÉROULANT EN IMAGES par dlvains

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

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

FAIRE APPARAITRE L'ONGLET 'DéVELOPPEUR' DANS OFFICE 2010 par neodante

[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1 par pierre

PB LORS DE L'INSTALLATION SHAREPOINT 2010. par Patrick Guimonet

[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2) par JeremyJeanson

[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2) par JeremyJeanson

Forum

SLT par kurapikt

HELP! FORMULAIRE - STYLE CSS/PHP & SESSION par LuxeurDelphii

RE : POSITION D'UN DIV TOUJOURS EN HAUT par fenoril

RE : AIDEZ MOI SVP PB AVEC LES SELECT par frandzd

RE : XMLHTTPREQUEST DE GET à POST par djfayr

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Site internet php
Budget : 350€
site formation reiki distance
Budget : 900€
Banniere Flash Drupal
Budget : 150€

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
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
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