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

Ce site au démarrage

begin process at 2012 05 24 21:57:22

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 727

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

BOUTON ROTATIF par kazma

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

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

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : AFFICHER UNE LIGNE OU UN TEXTAREA APRèS UN CLIC SUR UN LIEN par ayalo

CODE BUG JAVASCRIPT par zaikoe

RE : DéSACTIVER LA TOUCHE DE RETOUR par jopop

DéSACTIVER LA TOUCHE DE RETOUR par fattey

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€
Application iphone et android - gestion contenu et version derivees-URGENT
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP