Bouton style flash

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 932 fois - Téléchargée 27 fois

Contenu du snippet

Hello!
Ne soyez pas trop severe, je debute en javascript et c'est ma premiere source... Je l'ai un peu commentee mais c'est assez simple a comprendre =)

Le principe est simple, des qu'on passe sur une cellule, la fonction change peu a peu le background et le texte de la cellule en donnant un effet comme en flash ^^

Je ne sais pas que dire d'autre... Ce n'est pas tres optimise mais comme je l ai dit je debute ^^ je serai ravi d'ameliorer mon code grace a vos critiques...

Pour un exemple live, mon site : http://www.kezako.fr.fm

Source / Exemple :


<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<SCRIPT language=javascript type=text/javascript>

//Flash button by Goulagman <goulagman@wanadoo.fr>
//definition des vars
cod = '#E9EBFF'	//couleur de depart du fond
cof = '#8A96FF'	//couleur finale du fond
tod = '#0000ff'	//couleur de depart du texte
tof = '#F2F3FF'	//couleur finale du texte
step1 = '23'	//pas pendant que le bouton fonce
step2 = '40'	//pas pendant que le bouton s'eclaircit ( il s eclaircit plus lentement qu'il ne fonce )

function Hexa(Dec) {	//Conversion Hexadecimal > decimal
	var n = Dec.toString(16)
	if (n.length < 2) {n = "0" + n}
	return(n)
}

function Dec(Hexa) {	//Conversion decimal > Hexadecimal
	var n = parseInt(Hexa, 16)
	return(n)
}	

function ToHex(n) {	//Conversion couleur RGB > Hexa
	str=n
	var reg = new RegExp("[rgb\\(',\\)]", "i");
	res = str.split(reg);
	m='#'
	for (var i=0;i<str.length;i++) {
		var reg = new RegExp("[0-9]+", "i");
		if (reg.test(res[i])) {
			m=m + Hexa(parseInt(res[i]));
		}
	}
	return(m)
}

function couleur(id, cd, cf, td, tf, step) {
	if (navigator.appVersion.indexOf("MSIE") == -1){
		if (cd) { cd=ToHex(cd) }
		if (td) { td=ToHex(td) }
	}
	if (!cd ) { cd = cod }
	if (!td ) { td = tod }

	//On arrete le timer si le bouton est deja en trian de changer de couleur
	clearTimeout(col[id])

	//calcul des RGB de debut et de fin du texte et du fond
	rd=Dec(cd.substring(1,3))
	vd=Dec(cd.substring(3,5))
	bd=Dec(cd.substring(5,7))
	rf=Dec(cf.substring(1,3))
	vf=Dec(cf.substring(3,5))
	bf=Dec(cf.substring(5,7))
	rtd=Dec(td.substring(1,3))
	vtd=Dec(td.substring(3,5))
	btd=Dec(td.substring(5,7))
	rtf=Dec(tf.substring(1,3))
	vtf=Dec(tf.substring(3,5))
	btf=Dec(tf.substring(5,7))

	//calcul du step par couleur
	sr=((rf-rd)/step)
	sv=((vf-vd)/step)
	sb=((bf-bd)/step)
	str=((rtf-rtd)/step)
	stv=((vtf-vtd)/step)
	stb=((btf-btd)/step)

	//changement de la couleur
	rt = rd;vt = vd;bt = bd
	rtt = rtd;vtt = vtd;btt = btd
	adv = 0
	changecolor(id, rt, vt, bt, sr, sv, sb, rtt, vtt, btt, str, stv, stb, adv, step)
}

function changecolor(id, rt, vt, bt, sr, sv, sb, rtt, vtt, btt, str, stv, stb, adv, step) {
	document.getElementById(id).style.backgroundColor='#' + Hexa(Math.floor(rt)) + Hexa(Math.floor(vt)) + Hexa(Math.floor(bt))
	document.getElementById(id).style.color='#' + Hexa(Math.floor(rtt)) + Hexa(Math.floor(vtt)) + Hexa(Math.floor(btt))

	//on ajoute le pas de chaque couleur
	rt += sr;vt += sv;bt += sb
	rtt += str;vtt += stv;btt += stb
	
	adv++
	if ( adv != step+1 ) { col[id] = setTimeout('changecolor('+id+', '+rt+', '+vt+', '+bt+', '+sr+', '+sv+', '+sb+', '+rtt+', '+vtt+', '+btt+', '+str+', '+stv+', '+stb+', '+adv+', '+step+')',15) }
	else { col[id] = 1 }
}
</SCRIPT>
<STYLE type=text/css>
.titre {
	FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: arial; BACKGROUND-COLOR: #7c88ff
}
.cell {
	FONT-SIZE: 10px; COLOR: #0000ff; FONT-FAMILY: arial
}

</STYLE>

</HEAD>
<BODY 
onload="col = new Object()">
<CENTER>
<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=blue cellSpacing=2 cellPadding=3 bgColor=#b2b9ff 	border=1>
	<TR>
	<TD vAlign=top width=100 bgColor=white>
		<TABLE borderColor=blue cellSpacing=0 cellPadding=1 bgColor=#e9ebff 
		border=0>
		<TR>
		<TD class=titre width=100 height=14>
		<CENTER>Site</CENTER></TD></TR>
		<TR>
		<TD class=cell id=1 
			style="CURSOR: hand" 
			onclick="alert('Bouton Acceuil clické')" 
			onmouseover="couleur(1, this.style.backgroundColor, cof, this.style.color, tof, step1)" 
			onmouseout="couleur(1, this.style.backgroundColor, cod, this.style.color, tod, step2)">- 
			Accueil</TD></TR>
		<TR>
		<TD class=cell id=2 
			style="CURSOR: hand" 
			onclick="alert('Bouton Liens clické')" 
			onmouseover="couleur(2, this.style.backgroundColor, cof, this.style.color, tof, step1)" 
			onmouseout="couleur(2, this.style.backgroundColor, cod, this.style.color, tod, step2)">- 
			Liens</TD></TR>
		<TR>
		<TD class=cell id=3 
			style="CURSOR: hand" 
			onclick="alert('Bouton Contact clické')" 
			onmouseover="couleur(3, this.style.backgroundColor,cof, this.style.color, tof, step1)" 
			onmouseout="couleur(3, this.style.backgroundColor, cod, this.style.color, tod, step2)">- 
			Contact
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

Conclusion :


Pas de bugs connus ^^

A voir également

Ajouter un commentaire

Commentaires

millgabo
Messages postés
14
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
5 juin 2015
-
Salut il est super ca fait un style particulier en tout cas continue car t'est bien partis la et,merci pour l'idée bien jouer
eliassb
Messages postés
15
Date d'inscription
lundi 27 mars 2006
Statut
Membre
Dernière intervention
15 juin 2006
-
Ça fait bien penser au flash et ses boutons qui changent de couleur quand on passe dessus !!!!
remb54
Messages postés
20
Date d'inscription
samedi 4 décembre 2004
Statut
Membre
Dernière intervention
27 mai 2006
-
Ca fait quand meme un bon bout de script pour un débutant, bravo continue comme ca ;)
pn02
Messages postés
4
Date d'inscription
dimanche 27 juin 2004
Statut
Membre
Dernière intervention
29 juin 2004
-
Une fois qu'il est bien mit en forme, ce javascript peut-être parfait!
nico606
Messages postés
270
Date d'inscription
mercredi 5 novembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004
-
pourquoi pas, moi aussi au debut mes site me servait a apprendre !!!

D'ailleurs il va falloir que je refasse mon site en pseudo-frames moi aussi.

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 (Goulagman)