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

Ce site au démarrage

begin process at 2010 03 19 09:39:30

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

BOUTON STYLE FLASH

Information sur la source

Note :

9,33 / 10

Catégorie :Effets Niveau :Débutant Date de création :24/06/2004 Date de mise à jour :24/06/2004 18:08:10 Vu :10 161

Auteur : Goulagman

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

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

<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>

<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 ^^

Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de nico606 le 25/06/2004 20:01:34

le script est pas mal du tout pour ton site bien aussi mais un peu vide, juste un truc avec les pseudo-frames, quand tu rentre une valeur inconnu par exemple http://membres.lycos.fr/monstereffects/kezako/index.php?page=nico606

la page s'affiche sans rien au centre ce qui est normale, tu devrais mettre si la valeur est inconnu une page 404 a toi !!!

Commentaire de Goulagman le 25/06/2004 23:12:27

Ben nico 606 figure que toi que j y avasi meme pas pensé ^^ je te remercie je vais le mettre sur ma liste des choses a faire :p
Pour le site il est vide parce qu'il est recent et aussi parce qu'il est pas reference ^^ ( je m en sers pour apprendre a coder et j attend de faire quelque chose de plus evolue avant de le diffuser vraiment ) mais si tu veux appporter ta contribution hesite pas :p

Commentaire de nico606 le 26/06/2004 09:42:50

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.

Commentaire de pn02 le 28/06/2004 15:06:29

Une fois qu'il est bien mit en forme, ce javascript peut-être parfait!

Commentaire de remb54 le 05/12/2004 16:21:20

Ca fait quand meme un bon bout de script pour un débutant, bravo continue comme ca ;)

Commentaire de eliassb le 20/04/2006 15:26:52

Ça fait bien penser au flash et ses boutons qui changent de couleur quand on passe dessus !!!!

Commentaire de millgabo le 31/05/2006 03:50:17

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

Ajouter un commentaire

Nos sponsors

Derniers Blogs

MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril

CERTIFICATIONS BETA .NET 4 par KooKiz

[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo

Forum

RE : EFFACER UNE LIGNE DANS FICHIER TEXTE EN PHP par Arto_8000

RE : ADDITION DE VARIABLES DANS UN FORMULAIRE. par gilvidal31

RE : LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par kazma

RE : CHANGEMENT D' UNE IMAGE par blacknaske

RE : VALIDATION D'UN FORMULAIRE par crememain

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

plaquette - logo
Budget : 350€
Gestion clientele JEE
Budget : 500€
URGENT Travaux PAO iWork 09 arabe hebreu anglais captures ecran
Budget : 400€

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
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