Inspiré par la grande nouvelle série d’idées JavaScript de Greg Stager, j’ai pensé que je pourrais aussi bien partager quelques goodies que j’ai ramassés au fil des ans. Attention au terme – «Picked Up», parce que ce sont surtout des choses que je n’ai pas trouvé moi-même, mais que je trouve quelque part, et qui, au mieux, sont développées pour répondre à mes besoins. Pour celui-ci, tous les crédits vont à TLCMediaDesign pour m’avoir pointé dans la bonne direction avec son commentaire sur ce message de forum ici.
Pensez à créer une interaction par onglets ou à simuler une ancienne boîte de dialogue à onglets multiples de style Windows 95 où les en-têtes des onglets sont empilés et se chevauchent légèrement. Cliquer dessus ne devrait pas seulement afficher la page correspondante ci-dessous (assez facilement à faire avec les états), mais aussi amener cet en-tête d’onglet au premier plan (pas si facile avec les états). Ou pensez à une interaction où l’apprenant devrait trouver des choses dans un groupe d’autres éléments; peut-être en partie caché par d’autres trucs. Cliquez dessus pour les faire apparaître au premier plan – mission accomplie.
Captivate ne permet pas de modifier dynamiquement l’ordre d’empilement d’une diapositive. Il est codé en dur et essentiellement défini par l’ordre des objets dans la chronologie.
Cependant, on peut modifier cela en modifiant le zIndex de l’un des éléments html de l’objet Captivate via JavaScript.
Il existe trois éléments html pour chaque objet Captivate. Si votre objet Captivate est étiqueté « MyObject », il sera représenté par ces trois éléments DOM:
- «MyObject»
- «MyObjectc»
- «Re-myObjectc»
C’est le dernier de ces trois éléments ci-dessus, l’élément dit «rewrap» qui semble être pertinent pour la décision où notre objet Captivate se retrouve dans l’ordre d’empilement. Si nous modifions sa propriété de style zIndex avec JavaScript, nous pouvons déplacer notre objet Captivate vers le haut ou vers le bas dans l’ordre d’empilement. La syntaxe pour changer le zIndex est:
document.getElementById («re-MyObjectc»). style.zIndex = 2000;
Plus le nombre à la fin de cette ligne de code est élevé, plus l’élément vient au premier plan. Un zIndex de 0 serait le plus en arrière. Avec un zIndex de 2000 comme indiqué dans la ligne de code ci-dessus, ‘MyObject’ serait très probablement déplacé tout en haut de la pile, car il serait peu probable qu’il y ait plus de 2000 objets sur notre diapositive Captivate, donc rien else aura un z-index plus élevé que cela.
Malheureusement, il semble que je ne puisse pas publier une démo fonctionnelle ici pour certaines raisons (modérateurs, si vous examinez ce message, veuillez jeter un coup d’œil à cette discussion et conseiller ce que je devrais faire pour que cela fonctionne), j’ai donc joint le projet Captivate 19.5 déposer. téléchargez, ouvrez dans Captivate et appuyez sur F11 pour prévisualiser. Ce qui suit concerne la seule diapositive qui s’y trouve.
ChangeStackingOrder
Cliquez sur l’une des formes carrées sur la gauche pour mettre cette forme au premier plan et renvoyer les autres à leur place d’origine dans l’ordre d’empilement. Il permet également de parcourir le contenu affiché ici sur le côté droit de la diapositive (parcourez-le du haut / bleu clair au bas / rouge à son tour pour tout revoir dans le bon ordre).
Les formes carrées sont étiquetées «LightBlue», «DarkBlue», «BlueGreen», «Green», «Yellow» et «Red». Leurs identifiants d’éléments de réemballage sont donc:
- re-LightBluec
- re-DarkBluec
- re-BlueGreenc
- re-Greenc
- re-Yellowc
- re-Redc
Ran sur l’entrée de la diapositive, ce code enregistre les valeurs zIndex d’origine pour les six éléments et les écrit dans des variables:
var zLightBlue = document.getElementById («re-LightBluec»). style.zIndex;
var zDarkBlue = document.getElementById («re-DarkBluec»). style.zIndex;
var zBlueGreen = document.getElementById («re-BlueGreenc»). style.zIndex;
var zGreen = document.getElementById («re-Greenc»). style.zIndex;
var zYellow = document.getElementById («re-Yellowc»). style.zIndex;
var zRed = document.getElementById («re-Redc»). style.zIndex;
Chaque carré est une SmartShape « utilisée comme bouton » avec une action de clic JavaScript qui restaure d’abord l’ordre d’empilement d’origine (en récupérant les valeurs zIndex à partir des variables enregistrées lors de l’entrée de la diapositive), puis déplace le carré cliqué au premier plan en modifiant son élément de réemballage. zIndex à 2000 (illustré ici pour l’objet ‘Rouge’):
document.getElementById («re-LightBluec»). style.zIndex = zLightBlue;
document.getElementById («re-DarkBluec»). style.zIndex = zDarkBlue;
document.getElementById («re-BlueGreenc»). style.zIndex = zBlueGreen;
document.getElementById («re-Greenc»). style.zIndex = zGreen;
document.getElementById (« re-Yellowc »). style.zIndex = zYellow;
document.getElementById («re-Redc»). style.zIndex = 2000;
L’action modifie également l’état de la forme contenant ce texte ici (étiquette d’objet: «Description») pour afficher la section appropriée de la description:
cp.changeState (« Description », « [State name]”);
Les noms des états personnalisés invoqués sur l’objet « Description » sont « LightBlue », « DarkBlue », BlueGreen « , » Green « , » Yellow « et » Red « , correspondant aux étiquettes d’objet des formes carrées, au fur et à mesure de leur sélection.
Voici le hic:
Cela fonctionne uniquement comme prévu tant qu’aucun état d’objet alternatif n’est appelé pour un objet qui a été déplacé vers le haut ou vers le bas de cette façon. Le changement d’état ramène l’objet à sa position d’origine dans l’ordre d’empilement. Cela inclut également les états intégrés tels que Rollover.
Un autre hic:
Dans les zones où deux objets se chevauchent, un clic de souris sera toujours enregistré par les éléments qui étaient plus haut dans l’ordre d’empilement à l’origine. Déplacer un objet au-dessus d’un autre comme nous l’avons vu ici ne le fait pas capturer un événement de clic dans la zone de chevauchement. Peut-être que les événements de souris sont capturés par l’un des deux autres éléments: « MyObject » ou « MyObjectc », pour lesquels nous n’avons pas modifié la valeur zIndex. À enquêter.
