Skip to main content

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

sera nécessaire pour placer cette zone à l’endroit voulu, le plus simplement du monde :

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 !

Emmanuel Roc

Fondateur de l'école d'édition numérique ESTEN Sup'Édition à Tours Dirigeant de ROC Édition & Multimédia, packageur éditorial.

2 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
obi-wan Kenobi
obi-wan Kenobi
25 novembre 2014 15 h 51 min

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 !

Emmanuel
Emmanuel
25 novembre 2014 21 h 03 min

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é.

Pin It on Pinterest