Tutorial - Comment créer un pop-up au survol de la souris entièrement en CSS et accessible
Pour ouvrir une nouvelle fenêtre (pop-up), on pense souvent au Javacript, qui permet de le faire facilement.
Seulement, le
contenu du pop-up n'est pas indexable puisqu'il n'est pas parcouru par les moteurs de recherche (Ã cause du javascript).
De plus, l'ouverture de pop-up peut-être bloquée par les
bloqueurs de pop-up intégrés aux navigateurs récents.
Cette solution est d'autant plus à proscrire qu'elle n'est pas "user-friendly" car elle surprend l'utilisateur.
Il existe une solution qui permet d'
afficher une infobulle, un peu comme les info-bulles windows
au survol du curseur.
Cette solution est réalisée
entièrement en CSS et permet donc d'avoir un contenu indéxé pas les moteurs.
Une fois le code CSS écrit, il est simple d'afficher de nouvelles info-bulles, en quelques balises.
Libre à vous de donner ensuite un style correspondant au design de votre site web.
Cette solution est bien sûr
compatible Internet Explorer et Firefox xhtml.
Un exemple d'info-bulle CSS
Pop-up sans JavascriptLe contenu indexable
de l'info-bulle
Le code à ajouter à votre fichier CSS
a.info {
position:relative;
}
a.info:hover {
background: none;
z-index: 500;
}
a.info span {display: none;}
a.info:hover span {
display: inline;
position: absolute;
white-space: nowrap;
font-size:10px;
font-weight:normal;
width:150px;
top: 10px;
left: 50px;
background: white;
padding: 3px;
border: 1px solid #5D779A;
border-top: 4px solid #5D779A;
}
Le code à ajouter à votre fichier HTML
<a href="#" class="info">Pop-up sans Javascript<span>Le contenu indexable de l'info-bulle</span></a>
Comment modifier l'apparence de l'info-bulle
Pour
modifier l'apparence de l'info-bulle, modifiez simplement le fichier CSS.
Vous pouvez intégrer des images de fond, modifier les tailles de police ...
Pour ajouter l'info-bulle, n'oubliez pas de
préciser class="info" et le
contenu entre des balises span.
Si vous avez des problèmes avec
l'implantation de pop-up en CSS pour votre site web, laissez un commentaire sur cet article.
et merci pour ce tutorial plus que simplissime et efficace, qui permet je l'avoue de "tuner" les infos-bulles à l'image du site.
Cependant, il reste un bemol d'un point de vue référencement:
cette info bulle ne peut en aucun remplacer le texte alternatif contenu dans le "title" du lien (Ã moins que je me trompe), indispensable au bot des moteurs de recherche, google, pour ne pas le citer.
De ce fait , on se retrouve avec 2 info-bulles, ce qui , esthétiquement parlant, n'set pas le pied.
Le choix est donc difficile: esthétique ou référencement, telle est la question.
Toutefois, très bon tuto.
Cordialement