Menu avec effet de dégradé

Soyez le premier à donner votre avis sur cette source.

Snippet vu 25 670 fois - Téléchargée 29 fois

Commenter

Contenu du snippet

le menu n'est la que pour l'exemple :o)

Source / Exemple : 


<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
.MenuCell{border:1 solid #006699;font: 12 Arial;}
.MenuTable{font: 12 Arial; table-layout: fixed; border-collapse: collapse; width: 70px;}
A{width: 100%; text-decoration: none; text-indent: 2px;}
</STYLE>
</HEAD>
<BODY>

<SCRIPT>
//	pour la démo
sHTML = "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 CLASS='MenuTable'>"
	for (i=1; i<=10; i++){
		sHTML += "<TR><TD ID='MnuCell_" + i + "' onmouseover=\"gradient(0,'MnuCell_" + i + "')\" CLASS='MenuCell'><A HREF=\"#\">Page " + i + "</A></TD></TR>"
	}
sHTML += "</TABLE>"
document.write(sHTML)

var Colors = new Array()
Colors = InitColors("#000099","#FFFFFF",30)
function gradient(i, id){
	if (i<Colors.length){document.getElementById(id).style.backgroundColor  = "#" + Colors[i]
	setTimeout("gradient("+(i+1)+",'"+id+"')",11)
	}
}
//  convertion decimal ver hexa 
function Hexa(Dec){ 
  var nb = Dec.toString(16) 
  if (nb.length < 2) {nb = "0" + nb} 
  return(nb) 
} 
//	creation du tableau de couleurs
function InitColors(ColorStart, ColorEnd, Steps){ 
  //	si les couleurs viennent d'une propriété de style :
  Start = ColorStart.replace("#","")
  End = ColorEnd.replace("#","")
	
  var StartRed = parseInt(Start.substring(0, 2),16) 
  var StartGreen = parseInt(Start.substring(2, 4),16) 
  var StartBlue = parseInt(Start.substring(4, 6),16) 
  var EndRed = parseInt(End.substring(0, 2),16) 
  var EndGreen = parseInt(End.substring(2, 4),16) 
  var EndBlue = parseInt(End.substring(4, 6),16) 
  var Colors = new Array()
  cr=StartRed; cg=StartGreen; cb=StartBlue 
  sr = (EndRed - StartRed)/Steps  // rouge 
  sg = (EndGreen - StartGreen)/Steps  // vert 
  sb = (EndBlue - StartBlue)/Steps  // bleu 
	for (var x = 0; x <= Steps; x++) { 
		Colors[x] = Hexa(Math.floor(cr)) + Hexa(Math.floor(cg)) + Hexa(Math.floor(cb)) 
		cr += sr; cg += sg; cb += sb 
	} 
	return(Colors)
} 
</SCRIPT>
</BODY>
</HTML>

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.

Du même auteur (francktfr)