Temps : 15min
Domaine : Xhtml, CSS, Javascript, DOM

Bonjour,
J'ai travaillé sur un projet qui m'a posé un certain nombre de problème : je voulais des effets de fondu pour des images. Une fois mon code terminé et testé sous Firefox, je me suis dit "Allons donc tester ce code sur un autre navigateur !!". J'ai pris Internet Explorer et mon rêve s'est effondré. Des erreurs à en pleuvoir et pas du tout le résultat visuel attendu. Après diverses recherches j'ai trouvé mon bonheur et l'ai placé dans deux fonctions qui sont compatibles avec tous les navigateurs que j'ai pu tester qui vont vous ravir, surtout si vous compter les utiliser. ^^

Explication des erreurs : Mozilla Firefox comprend l'attribut "opacity" en CSS et pas IE qui lui utilise "filter: alpha(opacity=)", simple n'est-ce pas ? ^^

Conseil : Lorsque vous vous voulez mettre de l'opacité directement depuis le CSS utilisez : (exemple avec 60% d'opacité)
    opacity: 0.6;
    filter : alpha(opacity=60);

Maintenant voyons les fameuses fonctions :

Première fonction :
// retourne l'opacité d'un élément
// parametre : élément ou id de l'élément
// retour : opacité entre 0 et 100 inclus, 0 en cas d'erreur
function getOpacite(elt){
    elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);
    if(elt == null)
        return 0;
    var resu = 0;

    if(!!document.all){
        if(elt.filters.length > 0)
            resu = parseInt(elt.filters[0].opacity);
    }else{
        var val = 0;
        if(elt.style["opacity"] != ""){
            val = elt.style["opacity"];
        }else if(elt.style["-khtml-opacity"] != ""){
            val = elt.style["-khtml-opacity"];
        }else if(elt.style["-moz-opacity"] != ""){
            val = elt.style["-moz-opacity"];
        }

        resu = parseInt(parseFloat(val) * 100);
    }
    return resu;
}

Cette fonction a un rôle assez simple : donner la valeur réelle de l'opacité d'un élément HTML (div, span img, ...). Son premier test sert à savoir si le navigateur est Internet Explorer ou pas. Si c'est le cas elle regarde si il y a un filtre et si oui prend l'opacité.
Dans le cas où ce n'est pas IE, la fonctions regarde les attributs susceptibles de contenir la valeur de l'opacité.

Deuxième fonction :
// modifie l'opacité d'un élément
// parametre : élément ou id de l'élément
// retour : true ou false en cas de réussite ou d'échec
function reglerOpacite(elt, opacite){
    elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);
    if(elt == null)
        return false;
       
    elt.style["filter"] = "alpha(opacity="+opacite+")";
    elt.style["-moz-opacity"] = parseFloat(opacite) / 100.0;
    elt.style["-khtml-opacity"] = parseFloat(opacite) / 100.0;
    elt.style["opacity"] = parseFloat(opacite) / 100.0;
    return true;
}
Le rôle de cette fonction ci est de modifier l'opacité d'un élément (comment être plus clair ^^). Elle ne cherche pas à savoir si il s'agit d'Internet Explorer ou pas, elle renseigne tous les attributs capable de fournir l'opacité.

Voilà j'espère vous avoir été utile, toute critique constructive sur ces informations sont la bienvenue.