Le commutateur visible / hidden

ou Comment cacher un élément.

| accueil | couleur | HIDDEN | none | position négative | z-index | nonono |

Une question de visibilité

Visibility : hidden ou visible.

La propriété visibility du style permet de cacher un élément :

style="visibility:hidden;"> pour cacher l'élément.
style="visibility:visible;" pour montrer l'élément.

Cette propriété est très utile pour commander par script l'apparition ou la disparition d'un élément quelconque.

(Note : il y a un span à gauche).

Tout est visible par défaut.

L'invisibilité doit donc être paramétrée de manière volontaire.

Un style fera l'affaire :
.leSpann {visibility:hidden;}

Mise en oeuvre :
<span class="leSpann">Douze tonnes de mots-clés</span>

La question est de bien choisir l'élément à rendre invisible et de le positionner correctement.
Les tricheurs utilisent généralement un div placé dans le pied de page.

Input caché dans les formulaires

Un grand classique :

<input type="hidden" name="gniark" value="douze tonnes de mots-clés">

Il faut rester dans la limite du nombre de caractères accepté par value.

Il existe des motifs légitimes pour cacher un input.

Cacher par overflow

.grumpf { height:600px; overflow:hidden; }

Tout ce qui est inscrit plus bas que 600 px dans un div de classe grumpf sera invisible au regard de l'internaute.
Pour s'assurer que rien ne dépassera, il suffit de faire précéder le texte à cacher par une image haute de 600 px.
C'est un des procédés les plus sournois que je connaisse :)

Cacher en iFrame

On peut inscrire douze tonnes de mots-clés dans une page disons gniark.htm et insérer cette page dans une autre au moyen d'une iFrame minuscule.

<iframe src="gniark.htm" style="width:1px;height:1px;" />

Comment dire ? ... C'est ringard et médiocre, voilà.

Les options des listes déroulantes

C'est légitime, ce n'est pas caché, ça fait partie du contenu.

Disons que c'est discret et compact.

N'oubliez pas d'utiliser le label pour fournir une brève description de l'option :)

Accessoirement : le script du commutateur.

Le Javascript présent sur cette page n'est pas nécessaire pour cacher un élément avec visibility:hidden.
Voici son code (pour les curieux).


© 2001-2007 Szarah le Hardy
Page prévue à l'origine pour les Seuils critiques de l'écriture.