Script infobulle : Script info-bulle minimal

Exemple du script info-bulle du livre, avec les fonctionnalités minimales

Partie II : L'interactivité

Edition 1 | Chapitre 12 : Manipuler le document / Page 182

Edition 2 | Chapitre 12 : Manipuler le document / Page 197

Edition 3 | Chapitre 12 : Manipuler le document / Page 197

<html>
<head>
<style type="text/css">
body {height:300px; 
}
.definition {border-bottom:1px dashed #999; 
}
.infobulle {cursor: help;
}
div.infobulleJS {position:absolute;padding:3px;margin:0px;border:1px solid #000;background: #ccc;color:#000;box-shadow: 3px 3px 3px #000;max-width:200px;
}
/* Ajout de la flèche sur l'infobulle */
div.infobulleJS::before {position:absolute;bottom:100%;left:30px;content:" ";border-width:8px;margin-left:-16px;border-style:solid;border-color:transparent;border-bottom-color:#000;
}
div.infobulleJS::after {position:absolute;bottom:100%;left:30px;margin-left:-15px;content:" ";border-width:7px;border-style:solid;border-color:transparent;border-bottom-color:#ccc;
}
.infobulleAnimateIn {animation: infobulleAnimateIn 0.5s 1;
}
@keyframes infobulleAnimateIn {from { opacity: 0; margin: 30px 0px 0px 0px; }to { margin-bottom:0px 0px 0px 0px;opacity: 1; }
}
.infobulleAnimateOut {animation: infobulleAnimateOut 0.5s 1;
}
@keyframes infobulleAnimateOut {from { opacity: 1; margin: 0px 0px 0px 0px; }to { margin-bottom:30px 0px 0px 0px;opacity: 0; }
}
</style>
<title>Exemple complet du chapitre Manipulation du document</title>
<script type="text/javascript">
document.addEventListener("readystatechange", function(evt) {if (document.readyState=="interactive") {/* Trouver et parcourir tous les éléments de classe infobulle */var elts=document.getElementsByClassName("infobulle");for (var i=0; i<elts.length; i++) {elts[i].dataset.bulleId="";/* Transformer l'attribut title en dataset title */elts[i].dataset.title=elts[i].getAttribute("title");elts[i].setAttribute("title", "");/* Ajouter le gestionnaire d'événement sur le mouseenter */ elts[i].addEventListener("mouseenter", showBulle);/* Ajouter le gestionnaire d'événement sur le mouseleave */ elts[i].addEventListener("mouseleave", hideBulle);}}
});
/* Fonction de création et d'affichage d'une infobulle */ 
function showBulle(evt) {var elt=evt.target;/* Création de la bulle si elle n'existe pas déjà */if (elt.dataset.bulleId!="") {return false;}var bulle=document.createElement("div");var id="IB"+new Date().getTime();bulle.setAttribute("id", id);bulle.className="infobulleJS infobulleAnimateIn";bulle.innerHTML=elt.dataset.title;/* Positionnement de la bulle */var rect=elt.getBoundingClientRect();bulle.style.top=rect.top+rect.height+5+window.scrollY;bulle.style.left=rect.left+Math.round(rect.width/2)+window.scrollX;/* Enregistrement de l'id de la bulle dans dataset */elt.dataset.bulleId=id;/* Ajout de la bulle sur le document */document.body.appendChild(bulle);
} 
/* Fonction de suppression d'une infobulle */ 
function hideBulle(evt) {var bulle=document.getElementById(evt.target.dataset.bulleId);var elt=evt.target;bulle.className="infobulleJS infobulleAnimateOut";setTimeout(function() {document.body.removeChild(bulle);elt.dataset.bulleId="";}, 400);
} 
</script>
</head>
<body><h1 id="monH1" class="titre">Affichage d'info-bulles</h1>
 Qu'est-ce qu'une info-bulle ?On peut en mettre partout info-bulle 2 et même beaucoup ?
 </body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">body {  height:300px;    }.definition {  border-bottom:1px dashed #999;    }.infobulle {  cursor: help;}div.infobulleJS {  position:absolute;  padding:3px;  margin:0px;  border:1px solid #000;  background: #ccc;  color:#000;  box-shadow: 3px 3px 3px #000;  max-width:200px;}/* Ajout de la flè;che sur l'infobulle */div.infobulleJS::before {  position:absolute;  bottom:100%;  left:30px;  content:" ";  border-width:8px;  margin-left:-16px;  border-style:solid;  border-color:transparent;  border-bottom-color:#000;}div.infobulleJS::after {  position:absolute;  bottom:100%;  left:30px;  margin-left:-15px;  content:" ";  border-width:7px;  border-style:solid;  border-color:transparent;  border-bottom-color:#ccc;}.infobulleAnimateIn {  animation: infobulleAnimateIn 0.5s 1;}@keyframes infobulleAnimateIn {  from {     opacity: 0;     margin: 30px 0px 0px 0px;    }  to   {     margin-bottom:0px 0px 0px 0px;    opacity: 1;   }}.infobulleAnimateOut {  animation: infobulleAnimateOut 0.5s 1;}@keyframes infobulleAnimateOut {  from {     opacity: 1;     margin: 0px 0px 0px 0px;    }  to   {     margin-bottom:30px 0px 0px 0px;    opacity: 0;   }}</style><title>Exemple complet du chapitre Manipulation du document</title><script type="text/javascript">document.addEventListener("readystatechange", function(evt) {  if (document.readyState=="interactive") {    /* Trouver et parcourir tous les éléments de classe infobulle */    var elts=document.getElementsByClassName("infobulle");    for (var i=0; i<elts.length; i++) {      elts[i].dataset.bulleId="";      /* Transformer l'attribut title en dataset title */      elts[i].dataset.title=elts[i].getAttribute("title");      elts[i].setAttribute("title", "");      /* Ajouter le gestionnaire d'événement sur le mouseenter */        elts[i].addEventListener("mouseenter", showBulle);      /* Ajouter le gestionnaire d'événement sur le mouseleave */        elts[i].addEventListener("mouseleave", hideBulle);    }  }});    /* Fonction de création et d'affichage d'une infobulle */  function showBulle(evt) {  var elt=evt.target;  /* Création de la bulle si elle n'existe pas déjà */  if (elt.dataset.bulleId!="") {    return false;  }  var bulle=document.createElement("div");  var id="IB"+new Date().getTime();  bulle.setAttribute("id", id);  bulle.className="infobulleJS infobulleAnimateIn";  bulle.innerHTML=elt.dataset.title;  /* Positionnement de la bulle */  var rect=elt.getBoundingClientRect();  bulle.style.top=rect.top+rect.height+5+window.scrollY;  bulle.style.left=rect.left+Math.round(rect.width/2)+window.scrollX;  /* Enregistrement de l'id de la bulle dans dataset */  elt.dataset.bulleId=id;  /* Ajout de la bulle sur le document */  document.body.appendChild(bulle);} /* Fonction de suppression d'une infobulle */  function hideBulle(evt) {  var bulle=document.getElementById(evt.target.dataset.bulleId);  var elt=evt.target;  bulle.className="infobulleJS infobulleAnimateOut";  setTimeout(function() {    document.body.removeChild(bulle);    elt.dataset.bulleId="";  }, 400);}    </script></head><body>  <h1 id="monH1" class="titre">Affichage d'info-bulles</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <p>Qu'est-ce qu'une <span class="infobulle definition" title="Message d'information qui apparaît au survol de la souris. Le nom bulle vient de l'univers de la bande dessinée.">info-bulle</span> ?</p>  <p>On peut en mettre partout <span class="infobulle definition" title="Une autre bulle">info-bulle 2 </span> et même <span class="infobulle definition" title="Encore une autre bulle">beaucoup</span> ?</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    </body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...