Comment je suis arrivé à utiliser ce système
Il y a environ 1 an je réalisais ma participation intitulée « Somewhere » à CSSZenGarden pour la catégorie Special Effects. La particularité de ma participation était l’exploitation poussée de la pseudo-classe :hover pour l’affichage et le masquage des paragraphes.
Le gros problème c’est qu’Internet Explorer, le navigateur obsolète, interprètre la pseudo-classe :hover uniquement sur les ancres (<a>)
J’ai donc cherché une solution et, si mon souvenir est bon, c’est Rorschach sur le forum de FreeGaïa qui m’a aiguillé sur la propriété behaviour et les fichier htc.
Je vais donc tenter de vous expliquer comment je me suis servi de cette propriété pour simuler la pseudo-classe :hover sur Internet Explorer.
Attention ! Cette propriété n’est pas valide, elle est d’ailleurs encore moins prévue dans une nouvelle version de CSS. Evitez donc absolument de l’utiliser pour des sites se voulant accessibles et aux normes.
Qu’est-ce qu’un fichier HTC ?
C’est une sorte de fichier JavaScript externe permettant d’agir sur les éléments XHTML d’une page.
Comment s’utilise la propriété behaviour ?
Cette propriété a pour seul but d’appeler le fichier HTC qui agira sur l’élément.
Exemple :
[css] #element {behavior: url('fichier.htc');}
Que contient un fichier HTC ?
Un fichier HTML Component doit posseder en premier lieu une en-tête définissant ses actions (onmouseover, onmouseout, etc.) et les fonctions JavaScript qu’utiliseront ces handlers.
Exemple :
[html] <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="montrer(this)" /> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="cacher(this)" />
Ensuite viennent les fonctions comme dans un fichier JavaScript externe classique.
Simuler la pseudo-classe :hover sous Internet Explorer
Tout d’abord, créons un piti code XHTML.
[html] <div class="exemple"> <h2>Mon titre</h2> <p>Sed ligula. Cras et enim ac mauris porta gravida. In pulvinar nibh quis turpis. Etiam congue metus vitae arcu. Aenean est. Nulla ut est.</p> </div>
L’effet désiré va être qu’au survol du <h2> nous allons faire apparaître le paragraphe qui est par défaut caché. Pour ce faire, un bon navigateur comme va aisément comprendre ce petit code CSS :
[css] .exemple p {display:none;} .exemple:hover p {display:block;}
Mais pour Internet Explorer, ce code, c’est trop de bonheur d’un seul coup donc il comprends pas trop ce qu’il se passe dans sa tête. Il faut donc utiliser une entourloupe rustinesque qui s’appelle behaviour. On applique donc cette propriété sur l’élément source de l’effet, ici le <h2>.
[css] .exemple {behavior: url(display.htc);} .exemple p {display:none;} .exemple:hover p {display:block;}
Et là , c’est le drame ! Il faut créer le fameux fichier HTC, mais là , vaut mieux avoir des connaissances en JavaScript, sinon c’est pas la peine d’essayer d’utiliser cette méthode ! D’autant plus, que lorsque j’ai bossé dessus je crois me souvenir que certaines possibilités était bloquées. Par contre, faire un petit alert(« Kikoo ! »); skybloguesque pour la déconne internationale est permis.
Voici donc deux petites fonctions JavaScript toutes simples pour afficher et cacher tout les paragraphes <p>.
function montrer() { for(i=0; i<ListeP.length; i++) {ListeP[i].style.display = 'block';} } function cacher() { for(i=0; i<ListeP.length; i++) {ListeP[i].style.display = 'none';} }
Mais bon, là , e petit exemple devenu traditionnel s’impose…
Plus d’infos à ce sujet :
- MSDN: Introduction to DHTML Behaviors
- ZeGuigui : Les behaviors, c’est quoi ?
- ASP-PHP : DHTML : Déplacement d’objet
Ce que nos lecteurs en disent :
Tuf
neak
Ju
bobo
Adysone
Shemu
Adysone
Les commentaires sont clos.