|
Accès Rapide
Tutoriels
Communauté
|
Des infobulles avec Javascript, c'est accessible !
Publié par Kilaam le 14/9/2007 (696 lus)
Dans un tutoriel précédent, je vous présentait une solution utilisant uniquement le CSS pour créer des infobulles. L'inconvénient de cette technique était l'incompatibilité avec le navigateur Opera. Voici donc une autre méthode, utilisant un fichier JavaScript de 2 ko, qui s'avère être très propre et tout aussi accessible.
En effet, si le script détecte une balise contenant href et title, il affichera alors une infobulle stylée. Si JavaScript est désactivé, ce sera la traditionnelle infobulle du navigateur qui s'affichera. Donc, le code reste propre. 1. Télécharger les fichiers requisVoici un ZIP contenant les scripts et un fichier exemple. Le script requiert un fichier JS de 2ko, un mini fichier CSS et une image d'arrière-plan. 2. Implémenter le scriptInsérer les lignes suivantes entre les balises <head> et </head> de votre site. <script type="text/javascript" src="BubbleTooltips.js"></script> <link href="tooltip.css" rel="stylesheet" type="text/css" media="all" /> 2.1 : Activer les infobulles sur tous les liensPlacez ce code en dessous du premier énoncé ci-dessus. Celui-ci affichera une infobulle sur tous les liens de votre site contenant l'attribut href et title <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> 2.2 : Activer les infobulles uniquement sur les liens contenu dans une divSi vous ne souhaitez pas afficher des infobulles sur tous les liens, utiliser ce code plutôt que celui de l'étape 2.1. Celui-ci affichera une infobulle uniquement sur les liens contenus dans la div définie. Ici, il s'agit de content. <script type="text/javascript"> window.onload=function(){enableTooltips("content")}; </script> Voilà ! Rien de plus simple. Un simple fichier à implémenter qui génèrera des infobulles plutôt symphatique tout en conservant le code propre de vos pages.   
|
Publicité |
||||
