Ouvrir une nouvelle fenêtre pop-up sans javascript
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 windowsau 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
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;
}
Vous pouvez intégrer des images de fond, modifier les tailles de police …
Pour ajouter l’info-bulle, n’oubliez pas de préciser 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.Popularity: 12%
Bonjour,
Ce code marche bien sauf sur Opéra ou l’infobule reste en partie visible quand le curseur n’est plus dessus