(il s'agit d'un fondu de couleur. Le principe est simple: on indique une couleur de départ et d'arrivée en paramètre à la fonction dans le fichier .html et, le script calcul toutes les couleurs intermédiaires dans l'intervale et les affichent).
Le problème étant qu'il n'est compatible seulement qu'avec IE.
Du moins le fondu de couleur est bien visible lorsqu'on lance le script sous IE alors que sous opéra ou firefox, seule la dernière couleur est rendue mais pas les couleurs intermédiaires).
Si quelqun avait une suggestion à me faire à propos de ce problème...
Merci d'avance
le fichier fonducouleur.js:
var car = new Array ("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
/* sépare les couleurs RVB et définit l'écart le plus grand entre les 3
@param int base
@param int fin
*/
function calculCouleur(base,fin) {
var ecart = new Array();
var f = new Array();
var b = new Array();
var pourcentage = 0;
// séparation des couleurs RVB et convertion hexa en decimale à des fins de calcul
f[0] = hex_to_dec(fin.substr(0,2));
f[1] = hex_to_dec(fin.substr(2,2));
f[2] = hex_to_dec(fin.substr(4,2));
b[0] = hex_to_dec(base.substr(0,2));
b[1] = hex_to_dec(base.substr(2,2));
b[2] = hex_to_dec(base.substr(4,2));
// calcul des ecarts entre les 3 valeurs RVB
for (var i = 0; i < b.length; i++) {
if(b[i] > f[i]) {
ecart[i] = b[i] - f[i];
} else if (b[i] < f[i]) {
ecart[i] = f[i] - b[i];
} else {
ecart[i] = 0;
}
}
// récupere la plus haute valeur des 3 et lance la fonction de fondu
var ecart_max = maximum(ecart);
fonduCouleur(ecart_max, b, f);
}
/* boucle sur l'écart le plus grand entre les 3 couleurs RVB et modifie
la couleur de fond du document pour chaque itération
@param int ecart_max
@param array d
@param array a
*/
function fonduCouleur(ecart_max, d, a) {
var couleur;
var pourcentage;
// on se base sur la plus grande différence entre les 3 valeurs pour lancer la boucle
for(i = 0; i < ecart_max; i++) {
for(j = 0; j < 3; j++) {
if(d[j] > a[j]) {
d[j]--;
} else
if (d[j] < a[j]) {
d[j]++;
}
}
// représentation en % de la progression du fondu
pourcentage = Math.ceil((i / ecart_max) * 100);
document.getElementById("pourcentage").innerHTML = pourcentage + "%";
// reconvertion decimale en hexa afin d'afficher la nouvelle couleur
var d1 = dec_to_hex(d[0]);
var d2 = dec_to_hex(d[1]);
var d3 = dec_to_hex(d[2]);
// affichage
couleur = String(d1)+String(d2)+String(d3);
window.document.bgColor = '#' + couleur;
}
}
function maximum(ecart){
var maxi;
maxi = ecart[0];
if(maxi < ecart[1]) {
maxi = ecart[1];
}
if(maxi < ecart[2]) {
maxi = ecart[2];
}
return maxi;
}
/* convertion decimal -> hexadecimal */
function dec_to_hex(val){
val = parseInt(val)
var premier=Math.floor(val/16);
premier = String(car[premier]);
var deuxieme=String(val%16);
deuxieme=car[deuxieme];
return premier.toString()+deuxieme.toString();
}
/* convertion hexadecimal -> décimal */
function hex_to_dec(val){
var i;
var m;
var n;
var premier = val.charAt(0);
premier = premier.toUpperCase();
var deuxieme = val.charAt(1);
deuxieme = deuxieme.toUpperCase();
for (i in car){
if (premier == car[i]){
m = i;
}
}
i = 0;
for (i in car){
if (deuxieme == car[i]){
n = i;
}
}
premier = String(m * 16);
deuxieme = String(n);
return parseInt(premier)+parseInt(deuxieme);
}
Pour le tester: une simple page html avec des valeurs hexa en parametres de la fonction indiquant chacun une couleur de depart et d'arrivée.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>degrade</title>
<script src="fonducouleur.js" type="text/javascript">
</script>
</head>
<body>
<p id="pourcentage"></p>
<script type="text/javascript">
calculCouleur("000000","FFFFFF");
</script>
</body>
</html>