Script infobulle2 : Script info-bulle optimisé
Exemple du script info-bulle du livre, avec les fonctionnalités minimales
Partie II : L'interactivité
Edition 1 | Chapitre 12 : Manipuler le document / Page 183
Edition 2 | Chapitre 12 : Manipuler le document / Page 199
Exécution du script
Code source
<html><head><style type="text/css">#bottomright { position:absolute; right:15px; bottom:15px; background: #eee; padding:5px; border:1px solid #666;}#topright { position:absolute; right:15px; top:15px; background: #eee; padding:5px; border:1px solid #666;}.definition { border-bottom:1px dashed #999; }.infobulle { cursor: help;}div.infobulleJS { position:absolute; padding:3px; margin-right:10px; 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 par défaut */div.infobulleJS::before { position:absolute; content:" "; border-width:8px; border-style:solid; border-color:transparent;}div.infobulleJS::after { position:absolute; content:" "; border-width:7px; border-style:solid; border-color:transparent;}div.infobulleJSLeft::before { left:30px; margin-left:-16px;}div.infobulleJSLeft::after { left:30px; margin-left:-15px; }div.infobulleJSTop::before { bottom:100%; border-bottom-color:#000;}div.infobulleJSTop::after { bottom:100%; border-bottom-color:#ccc;}div.infobulleJSRight::before { right:30px ; margin-right:-16px; }div.infobulleJSRight::after { right:30px ; margin-right:-15px; }div.infobulleJSBottom::before { top:100%; border-top-color:#000; }div.infobulleJSBottom::after { top:100%; border-top-color:#ccc;}div.infobulleJSTop.infobulleAnimateIn { animation: infobulleAnimateInTop 0.5s 1;}@keyframes infobulleAnimateInTop { from { opacity: 0; margin: 30px 0px 0px 0px; } to { margin-bottom:0px 0px 0px 0px; opacity: 1; }}div.infobulleJSTop.infobulleAnimateOut { animation: infobulleAnimateOutTop 0.5s 1;}@keyframes infobulleAnimateOutTop { from { opacity: 1; margin: 0px 0px 0px 0px; } to { margin-bottom:30px 0px 0px 0px; opacity: 0; }}div.infobulleJSBottom.infobulleAnimateIn { animation: infobulleAnimateInBottom 0.5s 1;}@keyframes infobulleAnimateInBottom { from { opacity: 0; margin-top: -30px; } to { margin-top: 0px; opacity: 1; }}div.infobulleJSBottom.infobulleAnimateOut { animation: infobulleAnimateOutBottom 0.5s 1;}@keyframes infobulleAnimateOutBottom { from { opacity: 1; margin-top: 0px; } to { margin-top: -30px; opacity: 0; }}</style><title>Exemple complet optimisé du chapitre Manipulation du document</title><script type="text/javascript"> /* Programmation objet */ var TJSbulle = { delai: 500, /* Délai d'attente avant effacement de la bulle */ init: function() { document.addEventListener("readystatechange", function(evt) { if (document.readyState=="interactive") { console.log("TJSbulle initialisé"); /* 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", TJSbulle.show); /* Ajouter le gestionnaire d'événement sur le mouseleave */ elts[i].addEventListener("mouseleave", TJSbulle.leave); } } }); }, show: function(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="TJSbulle"+new Date().getTime(); bulle.setAttribute("id", id); bulle.className="infobulleJS"; bulle.innerHTML=elt.dataset.title; /* Positionnement initial de la bulle */ bulle.style.top=20; bulle.style.left=20; document.body.appendChild(bulle); var rect=elt.getBoundingClientRect(); var size=bulle.getBoundingClientRect() /* Vérification de la position horizontale */ console.log(rect.left+" "+size.width+" >? "+document.body.getBoundingClientRect().width); if (rect.left+size.width+20>document.body.getBoundingClientRect().width) { console.log("bulle à deplacer sur la gauche"); bulle.style.left=document.body.getBoundingClientRect().width-size.width+window.scrollX; bulle.className+=" infobulleJSRight"; } else { bulle.style.left=rect.left+Math.round(rect.width/2)+window.scrollX; bulle.className+=" infobulleJSLeft"; } /* Vérification de la position verticale */ console.log(rect.top+" "+rect.height+" >? "+document.body.getBoundingClientRect().height); if (rect.top+rect.height+20>document.body.getBoundingClientRect().height) { console.log("bulle à deplacer vers le haut "); bulle.style.top=document.body.getBoundingClientRect().height-rect.height-size.height-5+window.scrollY; bulle.className+=" infobulleJSBottom"; } else { bulle.style.top=rect.top+rect.height+10+window.scrollY; bulle.className+=" infobulleJSTop"; } console.log("Bulle en position ("+bulle.style.left+" , "+bulle.style.top+ ")"); /* Enregistrement de l'id de la bulle dans dataset */ elt.dataset.bulleId=id; /* Ajout de la bulle sur le document */ bulle.className+=" infobulleAnimateIn"; }, leave: function(evt) { setTimeout(function() { TJSbulle.hide(evt.target.dataset.bulleId, evt.target); }, TJSbulle.delai); }, hide: function(bulleId, elt) { var bulle=document.getElementById(bulleId); if (bulle) { bulle.className=bulle.className.replace("infobulleAnimateIn", "infobulleAnimateOut"); setTimeout(function() { document.body.removeChild(bulle); elt.dataset.bulleId=""; }, 300); } } } /* Initialisation de l'outil d'info bulles */ TJSbulle.init(); </script></head><body> <h1 id="monH1" class="titre">Affichage d'info-bulles optimisé</h1> <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> <p>Le script passe en programmation objet avec la création de l'objet <code>TJSbulle</code> et de son appel <code>TJSbulle.init()</code>.</p> Notez que les bulles restent affichées une demi seconde, même à la perte du focus.</p> <p>Les bulles sont repositionnées pour rester toujours affichées correctement et entièrement dans la page visible.</p> <div id="topright">Essayez la bulle en <span class="infobulle definition" title="Cette bulle se positionne automatiquement sur la gauche">bord de page</span></div> <div id="bottomright">Essayez la bulle en <span class="infobulle definition" title="Cette bulle se positionne de manière à être visible, même aux limites de l'écran">bord de page inférieur</span></div></body></html>
Nouvelle édition Tout JavaScript chez Dunod
En savoir plusSortie le 21 octobre
Version papier à 29€90
Format électronique à 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...