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