Trieur Organisé de Solutions et de Ressources Informatiques - Mot-clé - css2013-08-07T11:30:28+02:00Mickaelurn:md5:241cb1ae9d0ff884dd313ec2c95fafe4DotclearDes infobulles en CSS (compatible IE)urn:md5:1001fd281ec80529b7085ab137bfcbd12010-07-16T09:59:00+02:002011-04-23T11:12:30+02:00AdrienHTML / CSScsshtmlinfobullepositionnement <strong>Niveau :</strong> Moyen<br /><strong>Temps :</strong> 20 min<br /><strong>Domaine : </strong>HTML, CSS<br /><strong>Compatibilité </strong>: IE7+, Firefox 3.0+, Opéra 10+<br /><br />Ce tutoriel permet de réaliser des infobulles en HTML / CSS sans utiliser de Javascript. Cette méthode est<strong> compatible avec les principaux navigateurs Web</strong> et est <strong>valide W3C</strong>, elle permet d'alléger le poids de la page. Si on affiche l'infobulle dans un navigateur texte (ex : <a hreflang="en" href="http://lynx.browser.org/">Lynx</a>) le contenu est visible et présenté comme un élément sous-jacent ce qui <strong>améliore l'accessibilité</strong> de votre page. Le code CSS décrit est minimal, libre à chacun de personnaliser ses styles en fonction du design global du site.<br /><h2>Principe</h2>
Dans un premier temps, il faut mettre en forme la partie HTML, pour cela on utilise des <strong>listes imbriquées</strong>. 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 <strong>propriété display</strong> 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" .
<h2>Code source</h2>
Code HTML (à placer dans la feuille html ou a intégrer dans la page php)<br /><code class="html"><ul class="conteneur"><br /> <li class="permanent">Élément permanent</li><br /> <li class="temporaire"><br /> <ul class="infoBulle"><br /> <li class="elementInfoBulle">Infobulle</li> <br /> </ul><br /> </li><br /></ul></code><br />Code CSS (à placer dans la feuille de style ou dans le header de la page Web)<br /><code class="css">.conteneur{<br /> margin: 0; /* Suppression des marges créées par des navigateurs Web */<br /> padding: 0;<br /> list-style-type : none; /* Suppression des puces de liste */<br />}<br /><br />.conteneur li{<br /> margin: 0;<br /> padding: 0;<br /> display: none; /* Aucun élément de la liste n'est visible */<br />}<br /><br />.conteneur li.permanent{ /* Toujours visible */<br /> display: inherit; /* Annulation du display: none */<br /> padding: 0;<br /> color: blue;<br />}<br /><br />.conteneur:hover li{<br /> display: inherit; /* Si curseur sur permanent : annulation du display: none */<br />}<br /><br />.conteneur .temporaire{<br /> margin: auto;<br /> padding: 0;<br /> list-style-type : none;<br /> position: absolute; /* Positionner l'infobulle sans perturber le reste du contenu de la page */<br /> top: 100%; /* Positionnement */<br />}<br /><br />.conteneur .temporaire li{ /* l'infobulle */<br /> padding: 0;<br /> margin: 0;<br />}</code>Obtenir et modifier l'opacité en CSS via Javascript, compatibilté totaleurn:md5:d256a0187c0f9486fe840c8221fa7fb12010-06-22T13:54:00+02:002011-04-28T16:15:23+02:00FredJavascriptcssjavascriptopacite <div style="text-align: justify;">Temps : 15min<br />Domaine : Xhtml, CSS, Javascript, DOM<br /><br />Bonjour,<br />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. ^^<br /><br />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 ? ^^<br /><br />Conseil : Lorsque vous vous voulez mettre de l'opacité directement depuis le CSS utilisez : (exemple avec 60% d'opacité)<br /><code class="css"> opacity: 0.6;<br /> filter : alpha(opacity=60);</code><br /><br />Maintenant voyons les fameuses fonctions :<br /><br /><ins>Première fonction :</ins><br /><code class="js">// retourne l'opacité d'un élément<br />// parametre : élément ou id de l'élément<br />// retour : opacité entre 0 et 100 inclus, 0 en cas d'erreur<br />function getOpacite(elt){<br /> elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);<br /> if(elt == null)<br /> return 0;<br /> var resu = 0;<br /><br /> if(!!document.all){<br /> if(elt.filters.length > 0)<br /> resu = parseInt(elt.filters[0].opacity);<br /> }else{<br /> var val = 0;<br /> if(elt.style["opacity"] != ""){<br /> val = elt.style["opacity"];<br /> }else if(elt.style["-khtml-opacity"] != ""){<br /> val = elt.style["-khtml-opacity"];<br /> }else if(elt.style["-moz-opacity"] != ""){<br /> val = elt.style["-moz-opacity"];<br /> }<br /><br /> resu = parseInt(parseFloat(val) * 100);<br /> }<br /> return resu;<br />}<br /></code><br />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é.<br />Dans le cas où ce n'est pas IE, la fonctions regarde les attributs susceptibles de contenir la valeur de l'opacité.<br /><br /><ins>Deuxième fonction :</ins><br /><code class="js">// modifie l'opacité d'un élément<br />// parametre : élément ou id de l'élément<br />// retour : true ou false en cas de réussite ou d'échec<br />function reglerOpacite(elt, opacite){<br /> elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);<br /> if(elt == null)<br /> return false;<br /> <br /> elt.style["filter"] = "alpha(opacity="+opacite+")";<br /> elt.style["-moz-opacity"] = parseFloat(opacite) / 100.0;<br /> elt.style["-khtml-opacity"] = parseFloat(opacite) / 100.0;<br /> elt.style["opacity"] = parseFloat(opacite) / 100.0;<br /> return true;<br />}</code><br />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é.<br /><br />Voilà j'espère vous avoir été utile, toute critique constructive sur ces informations sont la bienvenue.<br /></div>