CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:40:29

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

INFO BULLE NON DESTRUCTIVE

Information sur la source

Note :

8,75 / 10

Catégorie :Effets Classé sous :infobulle, accessibilité, non intrusif Niveau :Initié Date de création :30/03/2010 Date de mise à jour :11/11/2010 00:34:37 Vu :5 455

Auteur : McPeter

Ecrire un message privé

Site perso

Commentaire sur cette source (22)

Ajouter un commentaire et/ou une note

Description

Bonjour,

Un petit code source permettant de faire des infos bulles personnalisés. Jusque là rien d'extraordinaire :).
Petites particularitées :
- ce code utilise getElementsByClassName pour savoir où agir (simplifie l'implantation)
- ce code est non intrusif (si javascript est à off, le site reste totalement explotable et les informations au survol de la souris restent accessible) il respecte donc l'accessibilité.
- pas de vilain onmouseover/onmouseout dans votre code HTML.
- l'info bulle suit la souris dans la zone réactive.

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Infos Bulle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="SCiTe" />
<meta name="author" content="McPeter" />
<style type="text/css">
/* <![CDATA[ */
#infoBull{
position:absolute; z-index:100;
padding:4px 10px;
max-width:20em;
border:2px groove silver;
background-color:#FFFFCC;
border:1px outset #D2D2D2;
}
.hide{ display:none; }
.view{ display:block; }
.viewBull{
width:30em;
border:1px solid black;
cursor:help;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var messag = new Array;
var infoBull;
// Pour IE qui capte jamais rien ...
if (!document.getElementsByClassName){
document.getElementsByClassName = function (cl) {
var retnode = [];
var myclass = new RegExp ('\\b'+cl+'\\b');
var elem = this.getElementsByTagName ('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test (classes)) retnode.push (elem[i]);
}
return retnode;
}
}
// Identifie tous les élements devant afficher une infobulle via un nom de class (ici : viewBull)
function catchBull(){
var bullElement = document.getElementsByClassName ('viewBull');
var bullElementNum = bullElement.length;
for (var i=0; i<bullElementNum; i++) {
// récupère le contenu de l'attribut title
messag[i] = bullElement[i].getAttribute ('title')
bullElement[i].removeAttribute ('title');
bullElement[i].onmouseover = thisBullView (i,'view');
bullElement[i].onmouseout = thisBullView (i,'hide');
}
}
// Affiche ou cache la Bulle
function thisBullView (i, show){
return function(){
infoBull.innerHTML=messag[i];
infoBull.className=show;
}
}
// Détection de la souris et positionnement de la Bulle
function move(e){
if(infoBull.className=='view') {
if (navigator.appName!="Microsoft Internet Explorer") {
infoBull.style.left=e.pageX+5+'px';
infoBull.style.top=e.pageY+10+'px';
}else{
if(document.documentElement.clientWidth>0){
infoBull.style.left=20+event.x+document.documentElement.scrollLeft+'px';
infoBull.style.top=10+event.y+document.documentElement.scrollTop+'px';
} else {
infoBull.style.left=20+event.x+document.body.scrollLeft+'px';
infoBull.style.top=10+event.y+document.body.scrollTop+'px';
}
}
}
}
// Chargement du script
window.onload=function(){
infoBull = document.getElementById('infoBull');
catchBull();
document.onmousemove=move;
}
/* ]]> */
</script>
</head>
<body>
<h1>Bulle d'aide sur className <small>(IE7-8 / FF)</small></h1>
<h2>JavaScript non intrusif !</h2>
<p>
- Bulle d'aide personnalisée utilisant l'attribut "title".<br />
- La bulle d'aide suit la souris sur les zones réactives.
</p>
<p class="viewBull" title="texte zone 1">
zone 1<br />
</p>
<p class="viewBull" title="texte zone 3">
zone 3
</p>
<p class="viewBull" title="texte zone 6">
zone 6<br />
<br />
<br />
</p>
<p class="viewBull" title="texte zone 2">
zone 2
</p>
<p class="viewBull" title="texte zone 4">
zone 4<br />
<br />
</p>
<div class="viewBull" title="Il peut être parfois utile de récupérer un élément DOM par le nom de sa classe CSS. Nativement, la méthode getElementsByClassName n'est pas implémentée. Quel dommage...">
<p>
blablabalbalblabab bl balbbalball blb lalabl bababl ab alb aal bl abalblbablb lbalb <br />
bablablablabbablab lblb ablab abl bla lablabal blabalb lblab lala ba llab labbl <br />
lablbabal blabl bblablabl bablba babla labl bab labla bb abal balbl abal blablab blaba bb al<br />
balblaba blababa bababl blab l<br />
</p>
</div>
<div id="infoBull" class="hide"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Infos Bulle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="SCiTe" />
    <meta name="author" content="McPeter" />
    <style type="text/css">
    /* <![CDATA[ */
    #infoBull{
      position:absolute; z-index:100;
      padding:4px 10px;
      max-width:20em;
      border:2px groove silver;
      background-color:#FFFFCC;
      border:1px outset #D2D2D2;
    }
      .hide{ display:none; }
      .view{ display:block; }
      .viewBull{
        width:30em;
        border:1px solid black;
        cursor:help;
      }
    /* ]]> */
    </style>

    <script type="text/javascript">
    /* <![CDATA[ */

    var messag = new Array;
    var infoBull;

    // Pour IE qui capte jamais rien ...
    if (!document.getElementsByClassName){
      document.getElementsByClassName = function (cl) {
        var retnode = [];
        var myclass = new RegExp ('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName ('*');
        for (var i = 0; i < elem.length; i++) {
          var classes = elem[i].className;
          if (myclass.test (classes)) retnode.push (elem[i]);
        }
        return retnode;
      }
    }

    // Identifie tous les élements devant afficher une infobulle via un nom de class (ici : viewBull)
    function catchBull(){
      var bullElement = document.getElementsByClassName ('viewBull');
      var bullElementNum = bullElement.length;
      for (var i=0; i<bullElementNum; i++) {
        // récupère le contenu de l'attribut title
        messag[i] = bullElement[i].getAttribute ('title')
        bullElement[i].removeAttribute ('title');
        bullElement[i].onmouseover = thisBullView (i,'view');
        bullElement[i].onmouseout = thisBullView (i,'hide');
      }
    }

    // Affiche ou cache la Bulle
    function thisBullView (i, show){
      return function(){
        infoBull.innerHTML=messag[i];
        infoBull.className=show;
      }
    }

    // Détection de la souris et positionnement de la Bulle
    function move(e){
      if(infoBull.className=='view') {  
        if (navigator.appName!="Microsoft Internet Explorer") {
          infoBull.style.left=e.pageX+5+'px';
          infoBull.style.top=e.pageY+10+'px';
        }else{
          if(document.documentElement.clientWidth>0){
            infoBull.style.left=20+event.x+document.documentElement.scrollLeft+'px';
            infoBull.style.top=10+event.y+document.documentElement.scrollTop+'px';
          } else {
            infoBull.style.left=20+event.x+document.body.scrollLeft+'px';
            infoBull.style.top=10+event.y+document.body.scrollTop+'px';
          }
        }
      }
    }

    // Chargement du script
    window.onload=function(){
      infoBull = document.getElementById('infoBull');
      catchBull();
      document.onmousemove=move;
    }
    /* ]]> */
    </script>

  </head>

  <body>

    <h1>Bulle d'aide sur className <small>(IE7-8 / FF)</small></h1>

    <h2>JavaScript non intrusif !</h2>

    <p>
      - Bulle d'aide personnalisée utilisant l'attribut "title".<br />
      - La bulle d'aide suit la souris sur les zones réactives.
    </p>


    <p class="viewBull" title="texte zone 1">
      zone 1<br />
    </p>

    <p class="viewBull" title="texte zone 3">
      zone 3
    </p>

    <p class="viewBull" title="texte zone 6">
      zone 6<br />
      <br />
      <br />
    </p>

    <p class="viewBull" title="texte zone 2">
      zone 2
    </p>

    <p class="viewBull" title="texte zone 4">
      zone 4<br />
      <br />
    </p>

    <div class="viewBull" title="Il peut être parfois utile de récupérer un élément DOM par le nom de sa classe CSS. Nativement, la méthode getElementsByClassName n'est pas implémentée. Quel dommage...">
      <p>
        blablabalbalblabab bl balbbalball blb lalabl bababl ab alb aal bl abalblbablb lbalb <br />
        bablablablabbablab lblb ablab abl bla lablabal blabalb lblab lala ba llab labbl <br />
        lablbabal blabl bblablabl bablba babla labl bab labla bb abal balbl abal blablab blaba bb al<br />
        balblaba blababa bababl blab l<br />
      </p>

    </div>

    <!-- Bulle d'aide -->
    <div id="infoBull" class="hide"></div>

  </body>
</html>

Conclusion

Vous pouvez voir à quoi ça ressemble sur : http://dev.blinckers-groups.com/scriptJS/infos_bul les_ver_2.html

Vous devez lire "infos_bulles_ver" et non "infos_bul les_ver" (la coupure se fait lors du post de la conclusion :'(

Historique

30 mars 2010 13:59:38 :: - Petite modification à la fois sur la suggestion de jdmcreator et aussi sur une erreur de déclaration sous IE
11 novembre 2010 00:34:39 :: lien brisé dans la conclusion

Sources du même auteur

RÉCUPÉRER TOUTES LES VALEURS D'UN SELECT MULTIPLE DANS UNE V...

AFFICHER UN POPUP DE DÉFINITION

AJUSTER DES IMAGES À LA DÉFINITION DE L'ÉCRAN DANS UNE NOUVE...

Toutes les sources de McPeter

Sources de la même categorie

BOUTON ROTATIF par kazma

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

MOOTOOLTIP par Miky76

ACCESSIBARRE - AMÉLIORER LE CONFORT DES PERSONNES NON-VOYANT... par Pfuch

LIENS AVEC INFO-BULLE IMAGE. par roro14123

INFO BULLE TOUJOURS VISIBLE par PetoleTeam

INFOS BULLE PERSONNALISÉES par abdelaziz_info

Commentaires et avis

Commentaire de jdmcreator le 30/03/2010 03:25:20 8/10

Utilisation de la classe pour gérer les éléments... j'aime bien :)

Mais sache que sur les nouveaux navigateurs, document.getElementsByClassName est déjà implanté. Peut-être testé la fonction avant afin d'éviter de faire travailler pour rien le navigateur.

Quelque chose du genre :

if(!document.getElementsByClassName){}

Mais je ne suis pas sûr si cela fonctionne ^^

En tout cas, un peu simpliste mais bon travail tout de même =)

Commentaire de Kimjoa le 30/03/2010 13:33:22

la remarque de jdmcreator est tout à fait juste, faut d'abord testé l'existence de la fonction.
Sinon je suis pas sur que d'utilisé title soit le plus pertinent. Beaucoup de script d'info-bulle l'utilise, mais pour y mettre du html, c'est galère faut tout protéger.
Pourquoi ne pas réutiliser getElementsByClassName pour récupérer les info-bulles?

Commentaire de McPeter le 30/03/2010 14:03:00

jdmcreator <-- merci pour la suggestion de tester si getElementsByClassName est implanté ou non (au départ je ne l'ai ajouté que pour IE)
Kimjoa <-- je crois que tu n'as pas du tout compris mon code :)

Commentaire de Kimjoa le 30/03/2010 14:21:57

bah si j'ai compris :)
C'est juste que de généré le contenue des info-bulle via l'attribut title c'est pas super pratique, surtout si on veux mettre du HTML.
Sinon getElementsByClassName servirait pas a grand chose, mais peux-être utiliser des suffix au id .....

Commentaire de McPeter le 30/03/2010 15:57:44

Kimjoa ben non :P
je m'explique ;o) :
tu dis : "Pourquoi ne pas réutiliser getElementsByClassName pour récupérer les info-bulles?" <-- c'est exactement ce que fait mon code.
"Sinon je suis pas sur que d'utilisé title soit le plus pertinent. " <-- ça évite de "casser" l'html "normal" .... si un non-voyant vient sur le site ... comment tu lui passes tes infos bulles ? ... là le but n'est pas de mettre de l'html dans des infos bulle... mais de "styler l'info bulle" ... Tu me diras : "dans ce cas pourquoi ne pas laissser faire l'attribut title ?" <-- parceque justement mon code est pour décorer une info bulle (celle par défaut étant à la fois relativement lente de réaction et aussi pas très "jolie") là ce qu'il se passe c'est que le code HTML n'est pas détruit dans sa sémantique. Le fait aussi qu'en cas de javascript désactiévé, les informations restent. d'où le titre : INFO-BULLE-NON-DESTRUCTIVE.
"...mais peux-être utiliser des suffix au id ....." <-- justement en utilisant un getElementsByClassName, celà évite de se torturer la tête à attribuer des id (donc >Unique<) là simplement si on veut utiliser l'infobulle personnalisé, il suffit d'appliquer une class ... .
Enfin voilà quoi :)

Commentaire de Kimjoa le 30/03/2010 16:12:30 9/10

ok ok , autant pour moi, j'avais pas pensé aux aveugle :(
Te met une note parce que tas bien pigé ton sujet ;) !
Pas 10 car le code reste assé simple!

Commentaire de McPeter le 30/03/2010 16:17:41

ah ben merci :)

Commentaire de kazma le 30/03/2010 19:50:05 administrateur CS

mais si on utilise une class unique si je veut attribuer un style different a chaque element je ne peut le faire a moins d'ajouter un id ou une balise style ?

Commentaire de PetoleTeam le 30/03/2010 19:59:16

Bonjour,
trois petites choses
- lorsque l'on met <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
on n'utilise pas les caractères étendues mais les entités HTML...
- dans la function move(e) l'utilisation de
if (navigator.appName!="Microsoft Internet Explorer") {
pour repérer le navigateur n'est pas top, il me semble que le test de l'existence du paramètre e est plus judicieuse...
- le fait d'écrire
window.onload=function(){
...etc...
}
plantera toutes les autres fonctions qui peuvent être associées au onload, il est préférable d'avoir recours à
addEventListener
ou
attachEvent

voilou...
;O)

Commentaire de McPeter le 30/03/2010 21:32:34

kazma "mais si on utilise une class unique si je veut attribuer un style different a chaque element je ne peut le faire a moins d'ajouter un id ou une balise style ?" <-- tout d'abord une CLASS a pas volonté à être unique ... sinon on utilise un ID ensuite rien ne t'interdit d'utiliser class="class1 class2 class3..."

PetoleTeam "on n'utilise pas les caractères étendues mais les entités HTML..." <-- rien compris ?

"
- le fait d'écrire
window.onload=function(){
...etc...
}
plantera toutes les autres fonctions qui peuvent être associées au onload, il est préférable d'avoir recours à
addEventListener
ou
attachEvent"

dans le contexte là .. je vois pas trop le problème .. m'enfin ..

Commentaire de green68 le 06/04/2010 02:45:13 9/10

Code simple mais efficace.
Fait exactement ce que l'on attend de lui sans prétention.
Bonne continuation !

Commentaire de inaden le 06/04/2010 09:08:02

Perfect. Une chose bien utile que voilà.

Commentaire de inaden le 06/04/2010 09:09:01 9/10

Ma note a pas été prise en compte !

Commentaire de McPeter le 12/04/2010 10:27:06

j'avais pas rermarqué un "bug" :\
La zone conclusion des posts de sources "brise" les liens ...
le lien d'exemple est : http://dev.blinckers-groups.com/scriptJS/infos_bulles_ver_2.html
j'ai voulu modifier la source (croyant que j'avais foiré un copié/collé de lien) mais dans la sources on a bien 'bulle' hors là une "coupure" se créé ('bul le')

Commentaire de moktarace le 04/06/2010 15:52:02

Toujours utile ce genre de p'tit code. Sinon, JSTooltip fais ça très bien, avec les infobulles customisables en CSS ;)

Commentaire de McPeter le 06/06/2010 15:07:01

ben là aussi c'est customisable via css ;)

et puis ça évite de charger une **grosse** lib javascript quand on veut faire qu'une ou deux choses ;o)

Commentaire de tiralia le 22/06/2010 14:03:28

Je note un petit problème sur..... IE^^
je suis sous ie8 et il y a un soucis quand la zone qui doit afficher l'infobulle se trouve en bas de page et qu'on doit descendre l'ascenseur.

l'info bulle n'est plus la et ie se comporte étrangement....

Commentaire de jdmcreator le 23/06/2010 01:37:41

En effet, il faudrait que le code vérifie si la bulle ne va pas plus bas que la hauteur de la page (offsetHeight), dans ce cas, il faudrait le mettre plus haut (si vous me suivez... ^^)

Commentaire de McPeter le 23/06/2010 01:54:40

ah effectivement .. pas pensé à ça :\
\/me ajoute todo list

Commentaire de jck860 le 19/11/2011 22:55:53

Pas mal du tout ton script !
Une question : y a-t-il possibilité de faire apparaître l'infobulle à gauche plutôt qu'à droite ?
Merci d'avance.

Commentaire de McPeter le 21/11/2011 13:58:15

Oui c'est tout à fait possible :)
ligne 70 : // Détection de la souris et positionnement de la Bulle
tu peux là jouer sur le point d'origine de la bulle (coin gauche haut)

Commentaire de jck860 le 21/11/2011 19:33:56

Oui, j'avais bien vu le commentaire à cette ligne mais je suis une vraie bille en javascript...
J'ai mis des signes moins les chiffres devant mais le navigateur n'a pas trop aimé !
Je vais faire d'autres essais et si je ne trouve pas je m'en remettrai à son créateur ;)

Merci en tout cas pour la rapidité de la réponse.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Help me!!! 3 jours que je souffre!! Création en java d'une infobulle [ par aoifutaba ] Bonjour!! j'ai fais un site sur la japanimation et j'aimerais lorsque qu'on survole une image, faire apparaitre une infobulle avec du texte! Et en cli INFOBULLE!!!!!!!!! [ par Milo59 ] bonjour, je possède un script Java pour mettre des infobulles mais comment faire pour que l'infobulle ne dépasse pas la largeur de la page car sinon i calendrier dans infobulle !!!! [ par roninou ] j'essai desesperement de mettre une calendrier dans une infobulle pour que l'utilisateur puisse choisir la date qu'il veut.j'ai deja le code pour crée imàge-infobulle [ par SYL20g ] Bonne nuit tout le monde,Je souhàiteràis créer des infobulles comportànt une imàge à là plàce du texte, e Infobulle personnalisable (bordure, arrière plan, couleur des polices) [ par masterpingouin ] Voilà, j'ai du mal à trouver la source sur le net.J'ai essayé de choper celle de www.lehiphop.com, mais à chaque fois que j'essaye infobulle menu deroulant [ par lu6fer ] bonjour, je souhaiterai faire une infobullen qui au lieu de faire une ligne de texte soit un menu deroulant a plusieur etages.... je re explique plus Calendrier dynamique (infobulle ?) [ par Ma2004 ] Salut à tous,J'ai vu que quelqu'un avait déjà posé la même question mais apparemment la réponse n'est jamais arrivé Infobulle qui agrandit la taille de mon iframe [ par p0236 ] Bonjour, j'ai un petit soucis, j'ai mis en place un système d'infobulle sur mon site, le problème c'est que celle-ci est dans une iframe, i. J'ai une colle : comment actualiser des infobulles ? [ par feuh7 ] Bonjour à tous, Je suis webmaster d'un site et 'léger' informaticien mais, cette fois je suis au pied du mur. Je m'explique : - j'ai instauré un sys Pb d'infobulle presque résolu [MAJ 20-09-2005] [ par feuh7 ] (MAJ 20-09-2005) Bonjour à tous, Je suis webmaster d'un site et 'léger' informaticien mais, cette fois je suis au pied du mur. Je m'explique : - j'

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP