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

Ce site au démarrage

begin process at 2012 02 11 05:06:18

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 :11 602

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

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

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

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011