Trieur Organisé de Solutions et de Ressources Informatiques

logo du site TOSRI

16 juillet 2010

Niveau : personne ayant des bases en informatique (terminologie, principe)

Des infobulles en CSS (compatible IE)

Niveau : Moyen
Temps : 20 min
Domaine : HTML, CSS
Compatibilité : IE7+, Firefox 3.0+, Opéra 10+

Ce tutoriel permet de réaliser des infobulles en HTML / CSS sans utiliser de Javascript. Cette méthode est compatible avec les principaux navigateurs Web et est valide W3C, elle permet d'alléger le poids de la page. Si on affiche l'infobulle dans un navigateur texte (ex : Lynx) le contenu est visible et présenté comme un élément sous-jacent ce qui améliore l'accessibilité de votre page. Le code CSS décrit est minimal, libre à chacun de personnaliser ses styles en fonction du design global du site.

Principe

Dans un premier temps, il faut mettre en forme la partie HTML, pour cela on utilise des listes imbriquées. L'élément permanent désigne ce qui est toujours visible à l'écran, cela peut être un lien, une image, du texte... Le second item de la liste contient la partie dynamique, qui n'apparait que si l'on survole l'élément permanent. On utilise la propriété display pour afficher ou non l'infobulle. La liste est formatée grâce au CSS, on supprime puce et marges. Ici, le texte fixe est en bleu pour indiquer à l'utilisateur qu'il se démarque mais pour augmenter l'usabilité il est conseillé de rajouter un pictogramme ou de surligner l'élément afin que l'utilisateur comprenne que l'élément se démarque. Il est possible de faire ressembler cet élément à un lien avec la propriété "text-decoration: underline" pour le bloc CSS ".conteneur li.permanent" .

Code source

Code HTML (à placer dans la feuille html ou a intégrer dans la page php)
<ul class="conteneur">
    <li class="permanent">Élément permanent</li>
    <li class="temporaire">
        <ul class="infoBulle">
            <li class="elementInfoBulle">Infobulle</li>       
        </ul>
    </li>
</ul>

Code CSS (à placer dans la feuille de style ou dans le header de la page Web)
.conteneur{
    margin: 0; /* Suppression des marges créées par des navigateurs Web */
    padding: 0;
    list-style-type : none; /* Suppression des puces de liste */
}

.conteneur li{
    margin: 0;
    padding: 0;
    display: none; /* Aucun élément de la liste n'est visible */
}

.conteneur li.permanent{ /* Toujours visible */
    display: inherit; /* Annulation du display: none */
    padding: 0;
    color: blue;
}

.conteneur:hover li{
    display: inherit; /* Si curseur sur permanent : annulation du display: none */
}

.conteneur .temporaire{
    margin: auto;
    padding: 0;
    list-style-type : none;
    position: absolute; /* Positionner l'infobulle sans perturber le reste du contenu de la page */
    top: 100%; /* Positionnement */
}

.conteneur .temporaire li{ /* l'infobulle */
    padding: 0;
    margin: 0;
}

22 juin 2010

Niveau : personne ayant des bases en informatique (terminologie, principe)

Obtenir et modifier l'opacité en CSS via Javascript, compatibilté totale

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.