#1 Le 03/03/2016, à 22:23
- temps
[résolu] Manipulation code HTML (éviter une répétition)
Bonjour,
Dans une des applications dérivées des vidéos interactives en HTML, j'indique comment améliorer ses présentations type open office ou powerpoint. De manière à rendre la navigation dans le document plus facile, j'ajoute en bas de chaque image (en moyenne 800 pour deux univers) une barre de fonction.
En exemple voici la barre que j'ai placé dans le dernier document de présentation que j'ai fait pour un ami.
Ce bout de code se retrouve donc répété 800 fois dans la page HTML dans la partie body.
<div class="action" onMouseDown="actionx1Press();" style="margin-left:1%;"></div>
<div class="action" onMouseDown="actionx2Press();" style="margin-left:1.5%;"></div>
<div class="action" onMouseDown="actionx3Press();" style="margin-left:2%;"></div>
<div class="action" onMouseDown="actionx4Press();" style="margin-left:2.5%;"></div>
<div class="action" onMouseDown="actionx5Press();" style="margin-left:3%;"></div>
<div class="action" onMouseDown="actionx6Press();" style="margin-left:3.5%;"></div>
<div class="action" onMouseDown="actionx7Press();" style="margin-left:4%;"></div>
<div class="action" onMouseDown="actionx8Press();" style="margin-left:4.5%;"></div>
<div class="action" onMouseDown="actionx9Press();" style="margin-left:5%;"></div>
<div class="action" onMouseDown="actionx10Press();" style="margin-left:5.5%;"></div>
<div class="action" onMouseDown="actionx11Press();" style="margin-left:6%;"></div>
<div class="action" onMouseDown="actionx12Press();" style="margin-left:6.5%;"></div>
<div class="action" onMouseDown="actionx13Press();" style="margin-left:7%;"></div>
<div class="action" onMouseDown="actionx14Press();" style="margin-left:7.5%;"></div>
<div class="action" onMouseDown="actionx15Press();" style="margin-left:8%;"></div>
<div class="action" onMouseDown="actionx16Press();" style="margin-left:8.5%;"></div>
<div class="action" onMouseDown="actionx17Press();" style="margin-left:9%;"></div>
<div class="action" onMouseDown="actionx18Press();" style="margin-left:9.5%;"></div>
<div class="action" onMouseDown="actionx19Press();" style="margin-left:10%;"></div>
<div class="action" onMouseDown="actionx20Press();" style="margin-left:10.5%;"></div>
<div class="action" onMouseDown="actionx21Press();" style="margin-left:11%;"></div>
<div class="action" onMouseDown="actionx22Press();" style="margin-left:11.5%;"></div>
<div class="action" onMouseDown="actionx23Press();" style="margin-left:12%;"></div>
<div class="action" onMouseDown="actionx24Press();" style="margin-left:12.5%;"></div>
<div class="action" onMouseDown="actionx25Press();" style="margin-left:13%;"></div>
<div class="action" onMouseDown="actionx26Press();" style="margin-left:13.5%;"></div>
<div class="action" onMouseDown="actionx27Press();" style="margin-left:14%;"></div>
<div class="action" onMouseDown="actionx28Press();" style="margin-left:14.5%;"></div>
<div class="action" onMouseDown="actionx29Press();" style="margin-left:15%;"></div>
<div class="action" onMouseDown="actionx30Press();" style="margin-left:15.5%;"></div>
<div class="action" onMouseDown="actionx31Press();" style="margin-left:16%;"></div>
<div class="action" onMouseDown="actionx32Press();" style="margin-left:16.5%;"></div>
<div class="action" onMouseDown="actionx33Press();" style="margin-left:17%;"></div>
<div class="action" onMouseDown="actionx34Press();" style="margin-left:17.5%;"></div>
<div class="action" onMouseDown="actionx35Press();" style="margin-left:18%;"></div>
<div class="action" onMouseDown="actionx36Press();" style="margin-left:18.5%;"></div>
<div class="action" onMouseDown="actionx37Press();" style="margin-left:19%;"></div>
<div class="action" onMouseDown="actionx38Press();" style="margin-left:19.5%;"></div>
<div class="action" onMouseDown="actionx39Press();" style="margin-left:20%;"></div>
<div class="action" onMouseDown="actionx40Press();" style="margin-left:20.5%;"></div>
<div class="action" onMouseDown="actionx41Press();" style="margin-left:21%;"></div>
<div class="action" onMouseDown="actionx42Press();" style="margin-left:21.5%;"></div>
<div class="action" onMouseDown="actionx43Press();" style="margin-left:22%;"></div>
<div class="action" onMouseDown="actionx44Press();" style="margin-left:22.5%;"></div>
<div class="action" onMouseDown="actionx45Press();" style="margin-left:23%;"></div>
<div class="action" onMouseDown="actionx46Press();" style="margin-left:23.5%;"></div>
<div class="action" onMouseDown="actionx47Press();" style="margin-left:24%;"></div>
<div class="action" onMouseDown="actionx48Press();" style="margin-left:24.5%;"></div>
<div class="action5mn" onMouseDown="actionstop5();" style="margin-left:33%;"></div>
<div class="action5mn" onMouseDown="actionfinstop5();" style="margin-left:35%;"></div>
<div class="actionvitesse" onMouseDown="diminuLeVent();" style="margin-left:41%;">-</div>
<div class="actionvitesse" onMouseDown="acelereLeVent();" style="margin-left:46%;">+</div>
<div class="actionunivers" onMouseDown="action1Press();" style="margin-left:51%;"></div>
<div class="actiontexte" style="margin-left:10%;"><p>time line</p></div>
<div class="actiontexte" style="margin-left:37%;"><p>pause</p></div>
<div class="actiontexte" style="margin-left:40%;"><p>speed</p></div>
<div class="actiontexte" style="margin-left:49%;"><p>multidirectional talk</p></div>Est-ce que quelqu'un connaît une technique pour que j'écrive ce code qu'une seule fois et ensuite que je l'appelle à l'aide d'une fonction répété 800 fois pour diminuer le poids de la page HTML ?
Exemple de vidéo interactive en HTML
Cordialement
Dernière modification par temps (Le 04/03/2016, à 14:00)
Parce que l'USB bootable est le support des systèmes experts,
Parce que l'USB bootable contient sa propre image au démarrage.
L'USB bootable permet de créer un monde à la dimension de son imagination
https://www.letime.net
Hors ligne
#2 Le 03/03/2016, à 23:11
- Rufus T. Firefly
Re : [résolu] Manipulation code HTML (éviter une répétition)
Salut,
Je n'ai pas très bien compris : tu veux 800 fois ce bloc ?
Il y a une chose qui me parait utile pour soulager la page, c'est de mettre les onmouse et les styles dans un javascript lancé au chargement de la page (window.onload).
Ça a au moins 2 avantages : on peut les générer dans une boucle et dans le HTML il n'y aura plus que quelque chose du genre <div></div>
Le principe, c'est d'attacher un gestionnaire d'événements (addEventListener) à chaque div.
Quelque chose de ce genre :
window.onload = function() {.
var divs = document.getElementsByTagName ('div');
for (var i = 0; i < divs.length; ++i) {
divs[i].addEventListener ("mousedown", msDown, false);
divs[i].style.marginLeft = ??? (je ne suis plus trop sûr de la syntaxe);
divs[i].setAttribute.id = div + i;
... autres actions;
}
}
function msDown (event) {
var div_id = event.target.id;
traitement quand le bouton est pressé sur le div d'id div_id
}Edit : s'il n'y a rien dans les <div>, tu peux même les générer à la volée avec javascript...
Dernière modification par Rufus T. Firefly (Le 03/03/2016, à 23:19)
La provocation est une façon de remettre la réalité sur ses pieds. (Bertolt Brecht)
Il n'y a pas de route royale pour la science et ceux-là seulement ont chance d'arriver à ses sommets lumineux qui ne craignent pas de se fatiguer à gravir ses sentiers escarpés. (Karl Marx)
Il est devenu plus facile de penser la fin du monde que la fin du capitalisme
Hors ligne
#3 Le 04/03/2016, à 07:20
- temps
Re : [résolu] Manipulation code HTML (éviter une répétition)
Bonjour,
merci pour la réponse.
oui car il y a 800 images générées par la page HTML, et ce bloc représente l'outil qui permet de se déplacer dans le document.
J'ai déjà essayé cette technique, le problème rencontré est que j'ai toutes les images qui s'affichent en même temps, car cela perturbe la construction de la vidéo (c'est peut-être que j'ai mal écrit)
j'utilise la technique proposée "addEventListener" dans PianoBaul pour jouer les sons avec les touches claviers, Mais je sais que mon écriture avec addEventListener ne fonctionne que sous firefox (pas chrome, IE, ...)
Après le test, en ajoutant les lignes dessous cela fonctionne avec les touches claviers et évite la répétition, mais il n'y a pas assez de touche clavier et c'est moins ludique car on ne visualise pas.
Je vais essayer dans cette voie en donnant des id aux div repères
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Should do nothing if the key event was already consumed.
}
switch (event.key) {
case "a":
actionx1Press();
break;
case "z":
actionx2Press();
break;
case "e":
actionx3Press();
break;
case "r":
actionx4Press();
break;
case "t":
actionx5Press();
break;
case "y":
actionx6Press();
break;
case "u":
actionx7Press();
break;
case "i":
actionx8Press();
break;
case "o":
actionx9Press();
break;
case "p":
actionx10Press();
break;
case "q":
actionx11Press();
break;
case "s":
actionx12Press();
break;
case "d":
actionx13Press();
break;
case "f":
actionx14Press();
break;
case "g":
actionx15Press();
break;
case "h":
actionx16Press();
break;
case "j":
actionx17Press();
break;
case "k":
actionx18Press();
break;
case "l":
actionx19Press();
break;
case "m":
actionx20Press();
break;
case "w":
actionx21Press();
break;
case "x":
actionx22Press();
break;
case "c":
actionx23Press();
break;
case "v":
actionx24Press();
break;
case "b":
actionx25Press();
break;
case "n":
actionx26Press();
break;
case "0":
actionx27Press();
break;
case "1":
actionx28Press();
break;
case "2":
actionx29Press();
break;
case "3":
actionx30Press();
break;
case "4":
actionx31Press();
break;
case "5":
actionx32Press();
break;
case "6":
actionx33Press();
break;
case "7":
actionx34Press();
break;
case "8":
actionx35Press();
break;
case "9":
actionx36Press();
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Consume the event for suppressing "double action".
event.preventDefault();
}, true);Cordialement
P.S.
J'arrive aussi en appelant des div, mais le problème de fond reste le même car pour chaque action j'ai besoin d'un div différent car je ne peux donner deux fois la même identité à un div, soit 800 fois les 60 actions
Je pense que mon problème n'est pas de code mais conceptuel.
En d'autres mots, le code original a été conçu pour des vidéos interactives, et selon l'image nous avons différentes évolutions vidéos différentes. Ici le cas rencontré est différent puisque nous voulons quelque chose qui reste en permanence à l'écran et traverse toutes les images vidéo, le but ici est de pouvoir naviguer de différentes manières dans une présentation. Je vais réfléchir dans cette voie pour voir, car que ce soit avec le clavier ou le clique gérer les événements dans les images fonctionne mais doit pouvoir s'optimiser.
Cordialement
Dernière modification par temps (Le 04/03/2016, à 13:46)
Parce que l'USB bootable est le support des systèmes experts,
Parce que l'USB bootable contient sa propre image au démarrage.
L'USB bootable permet de créer un monde à la dimension de son imagination
https://www.letime.net
Hors ligne
#4 Le 04/03/2016, à 14:00
- temps
Re : [résolu] Manipulation code HTML (éviter une répétition)
Bonjour,
De décrire le problème j'ai trouvé une solution possible.
L'erreur est du que ce qui est adapté pour une vidéo interactive, ne l'est pas forcément pour une barre de gestion des événements dans une présentation.
La vidéo interactive appelle les événements dans les images. Les images sont incrémentées par un switch qui appel des div.
Pour obtenir une partie fixe en permanence à l'écran, il suffit de placer le code générant la partie fixe en dehors des div du switch, en exemple juste avant la fermeture de la balise body
J'ai testé ça marche, j'ai corrigé le code du lien donné pour le récupérer et adapter à sa présentation c'est
wget -c http://www.letime.net/alpha/banque/base9/index.htmlJe poste en résolu.
Cordialement
Dernière modification par temps (Le 04/03/2016, à 19:04)
Parce que l'USB bootable est le support des systèmes experts,
Parce que l'USB bootable contient sa propre image au démarrage.
L'USB bootable permet de créer un monde à la dimension de son imagination
https://www.letime.net
Hors ligne