Depuis l’arrivée de l’ePub 3 fixed-layout, les développeurs s’en donnent à cœur joie pour ajouter de l’interactivité dans les livres électroniques. Seulement voilà : au tap sur un bouton, un hyperlien ou un déclenchement d’événement, cette satanée barre de menu en haut (évidemment bienvenue pour retourner à la bibliothèque ou consulter le sommaire ou ses favoris) et cette re-satanée barre de navigation en bas, apparaissent au moindre tap sur l’écran de notre iPad favoris.
Quelques lignes de code suffisent à désactiver cela, juste à l’endroit où l’on a placé notre interactivité. Ainsi, un tap où il n’y a pas d’interactivité fait naturellement apparaître cette « bienvenue » (cette-fois-ci) barre de menu.
Pour cela, il faut bien comprendre le fonctionnement des quelques lignes de codes javascript que je vous présente ici, et c’est électriquement génial !!!
Prenons l’exemple d’une zone cliquable au dessus d’une image pour lancer un son.
Une
On indique ici une ID= »area_01″ qui permettra à notre code javascript de pouvoir identifier le fragment de code à traiter. La classe « maPosition » servira à placer précisément la zone cliquable à l’endroit voulu dans notre fichier CSS.
On place un son à partir d’une balise audio en faisant bien attention de placer ces balises audio avant le code javascript que je vais vous dévoiler (soyez patients !!).
Dans cette balise audio, nous lui indiquons une ID (audio_01) qui permettra à notre code javascript de jouer le son au tap sur notre zone DIV qui a comme ID= « area_01 ».
Le preload permet comme son nom l’indique de charger le son au chargement de la page et de pouvoir le jouer dès le déclenchement sans temps de latence.
Le texte est le « fallback » qui permet d’afficher un message lorsque le dispositif de lecture ne prend pas en charge l’audio.
Et maintenant, le fameux code javascript, commenté :
var eventend; //on initialise une variable qui prendra la valeur "touchend" sur tablette ou "mouseup" sur desktop sound_01 = document.getElementById('audio_01'); //on attribue la balise audio à cette variable zone_01 = document.getElementById('area_01'); //on attribue la div cliquable à cette variable if (navigator.userAgent.match(/iPad/)) eventend = 'touchend'; //on teste l'appreil (ipad ou desktop) else eventend = 'mouseup'; zone_01.addEventListener(eventend, function(e) //on attend un événement et dès qu'il arrive on lance la fonction (e) { e.preventDefault(); //on désactive le menu par défaut if (sound_01.played.length == 0) sound_01.play(); //on joue le son else if (sound_01.played.length == 1) sound_01.load(); //on stoppe ou rejoue le son au deuxième tap });
Vous remarquerez que mes ID sont numérotés (_01). En effet, si on a plusieurs sons et plusieurs zones cliquables, on numérote nos interactivités.
L’exemple qui suit servirait à jouer un même son en deux zones cliquables différentes.
var eventend; sound_01 = document.getElementById('audio_01'); zone_01 = document.getElementById('area_01'); zone_02 = document.getElementById('area_02'); if (navigator.userAgent.match(/iPad/)) eventend = 'touchend'; else eventend = 'mouseup'; zone_01.addEventListener(eventend, function(e) { e.preventDefault(); if (sound_01.played.length == 0) sound_01.play(); else if (sound_01.played.length == 1) sound_01.load(); }); zone_02.addEventListener(eventend, function(e) { e.preventDefault(); if (sound_01.played.length == 0) sound_01.play(); else if (sound_01.played.length == 1) sound_01.load(); });
Dans cet exemple, on aurait deux zones et deux sons différents :
var eventend; sound_01 = document.getElementById('audio_01'); sound_02 = document.getElementById('audio_02'); zone_01 = document.getElementById('area_01'); zone_02 = document.getElementById('area_02'); if (navigator.userAgent.match(/iPad/)) eventend = 'touchend'; else eventend = 'mouseup'; zone_01.addEventListener(eventend, function(e) { e.preventDefault(); if (sound_01.played.length == 0) sound_01.play(); else if (sound_01.played.length == 1) sound_01.load(); }); zone_02.addEventListener(eventend, function(e) { e.preventDefault(); if (sound_02.played.length == 0) sound_02.play(); else if (sound_02.played.length == 1) sound_02.load(); });
Concernant les zones cliquables, des balises en ligne peuvent également faire l’affaire :
<span id="area_01">Jouez-moi !
Et même des liens !
Visitez-moi...
Et même les images elles-même (trop fort !).
Bref, donnez-vous à cœur joie sans être enquiquinés par la barre des menus !
Enjoy Electric !
Salut,
Astuce plutôt cool !
La question que je me pose est s'il est possible d'automatiser cette manip. !!
Merci d'avance pour toute info !
Cela dépend de la complexité des interactivités mais je pense qu'une piste intéressante serait d'utiliser des Regex avec un éditeur de texte approprié.