Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 22/05/2015, à 21:16

temps

menu css3

Bonjour,

Je viens d'entamer aujourd’hui le projet PianoBaul en HTML5

Je suis à la recherche de DEV pour avancer dans le projet, le code se trouve sur ce fil

Toute aide dans le code HTML5 est bienvenu (clavier azerty)...

Cordialement


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 25/05/2015, à 22:09

temps

Re : menu css3

Bonjour,
Un petit up,
J'ai ajouté les touches claviers au code, (multitouches en cours, pour l'obtenir il suffit que chaque touche appelle une fonction différente contrairement au clique qui appelle toujours la même fonction en changeant un argument, je travaille sur la boucle for en javascript pour obtenir la touche repeat)

pour récupérer le code

wget -c http://letime.net/PianoBaul/

Cordialement

Dernière modification par temps (Le 26/05/2015, à 11:42)


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

#3 Le 27/05/2015, à 12:02

temps

Re : menu css3

Bonjour,
Le problème avec les boucles en css3, c'est que tout est joué, la boucle ne s'arrête pas.
En plus il faut considéré qu'à mes tests de donner plusieurs identité au même éléments n'a pas marché, j'ai résolu le multitouche (répétition de la même touche en créant plusieurs fichiers audio identique possédant chacun une identité différente et en les appelant avec :

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;

.....

  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

Visuellement c'est pas très propre, mais toutes les techniques de simplifications que j'ai testé ne fonctionnent pas, alors même que cette technique que j'ai mis au point fonctionne

Cordialement


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 30/05/2015, à 13:16

temps

Re : menu css3

Bonjour,
le projet avance, j'ai ajouté un lien de téléchargement de l'application ( des millions de piano différents utilisable en HTML), un lien vers les cours qui expliquent les lois physiques (un instrument qui permet de sélectionner son piano) et un lien vers le wiki qui explique.
Actuellement, il y a 2 pianos en ligne, je dois améliorer le choix des piano, et reprendre le code pour qu'il soit compatible avec les téléphones ou tablettes sous linux (les autres O.S. n'ont qu'à devenir compatible linux j'ai pas le temps)

Il faut aussi que j'affine le code HTML, pour essayer de rendre l'application en ligne plus performante

Si quelqu'un veut participer au projet, je suis toujours en demande.

Cordialement


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

#5 Le 01/06/2015, à 11:42

temps

Re : menu css3

Bonjour,

Toujours au sujet du css3, j'ai pu observé que ma technique de représenter une class pour les touches blanches et une classe pour les touches noires fonctionnent très bien pour les P.C. en respectant l'ordre.
Mais que par contre google, n'acceptait pas cette technique pour les téléphones en bloquant pour liens trop proches.
J'ai donc repris le code en créant trois classe pour les touches blanches. Celles-ci utilise la balise after préconisée par w3c.
Le code pour les touches blanches devient :

.toucheblanche{
  position:absolute;
  height:181px;
  width:3.4%;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}
.toucheblanche:before{
  content: "";  
  
    position:absolute;
  height:120px;
  width:130%;
  margin-top:181px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}


.toucheblanche:active{
  -webkit-transform:perspective(650px) rotateX(-10deg);
  transform:perspective(650px) rotateX(-10deg);
  margin-top:102px;
}


.toucheblanche1{
  position:absolute;
  height:180px;
  width:4.5%;
  border-left: 50% solid transparent;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}
.toucheblanche1:before{
  content: "";  
  
  position:absolute;
  height:120px;
  width:100%;
  margin-top:180px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}

.toucheblanche2{
  position:absolute;
  height:181px;
  width:4.5%;
  border-left: 50% solid transparent;
    border-right: 50% solid transparent;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}
.toucheblanche2:before{
  content: "";  
  
  position:absolute;
  height:120px;
  width:100%;
  margin-top:180px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}

avec le simple pour les touches de gauche, le 1 pour les touches de droite, et le 2 pour celles du centre
J'essaie de mettre en ligne le nouveau code dans la journée.

Cordialement


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

#6 Le 08/06/2015, à 14:47

temps

Re : menu css3

Bonjour,
Je viens de jeter les premières bases d'une page de piano dédiée aux batteries (Drum)

<!DOCTYPE html>
<html>
<head>
<title>Drum sous PianoBaul git Debian Facile</title>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<script>

// j'ignitialise mes variables
    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;

// j'ajoute le clavier

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; 
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;


    default:
 
      return; 
  }

  
  event.preventDefault();
}, true);


// je place les fonctions pour récupérer les cliques souris

function grossecaissePress(){
	mua1 = mua1 + 1;
	if(mua1>4){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function tombassePress(){
	mua2 = mua2 + 1;
	if(mua2>4){
        mua2 =0;
  	}
	multitoucheb(mua2);
  }
function cymbaleridePress(){
	mua3 = mua3 + 1;
	if(mua3>4){
        mua3 =0;
  	}
	multitouchec(mua3);
  }
function cymbaleride1Press(){
	mua4 = mua4 + 1;
	if(mua4>4){
        mua4 =0;
  	}
	multitouched(mua4);
  }
function cymbaleride2Press(){
	mua5 = mua5 + 1;
	if(mua5>4){
        mua5 =0;
  	}
	multitouchee(mua5);
  }
function cymbaleride3Press(){
	mua6 = mua6 + 1;
	if(mua6>4){
        mua6 =0;
  	}
	multitouchef(mua6);
  }
function cymbaleride4Press(){
	mua7 = mua7 + 1;
	if(mua7>4){
        mua7 =0;
  	}
	multitoucheg(mua7);
  }
function cymbaleride5Press(){
	mua8 = mua8 + 1;
	if(mua8>4){
        mua8 =0;
  	}
	multitoucheh(mua8);
  }
function tommedium1Press(){
	mua9 = mua9 + 1;
	if(mua9>4){
        mua9 =0;
  	}
	multitouchei(mua9);
  }
function tommedium2Press(){
	mua10 = mua10 + 1;
	if(mua10>4){
        mua10 =0;
  	}
	multitouchej(mua10);
  }
function tommealto1Press(){
	mua11 = mua11 + 1;
	if(mua11>4){
        mua11 =0;
  	}
	multitouchek(mua11);
  }
function tommealto2Press(){
	mua12 = mua12 + 1;
	if(mua12>4){
        mua12 =0;
  	}
	multitouchel(mua12);
  }

// je lance ici la lecture du fichier audio en fonction de la position de la variable mua

  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }


</script>

<style>
/* je centre le titre de la page*/
h1 { text-align: center }

/* 1-je dessine en premier ce qui est statique au fond destiné a être couvert en partie*/



.pied1 {
position:fixed;
margin-top: 18%;
margin-left: 11%;
    width: 0.9%;
    height: 5%;
    background: #c9c0bb;
}

.piedpencher1{
position:fixed;
margin-top: 18%;
margin-left: 14%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
}

.piedpencher2{
position:fixed;
margin-top: 18%;
margin-left: 8%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(150deg);
	-moz-transform:skew(150deg);
	-o-transform:skew(150deg);
	tranform:skew(150deg);
}
/*2- je place en second les différentes hauteur que j'ajuste par élément avec un top-margin*/

.position1{
	margin-top: 5%;
	}
.position2{
	margin-top: 25%;
	}
.position3{
	margin-top: 40%;
	}
.position4{
	margin-top: 7%;
	}
/*3- je dessine en troisième chaque élément*/
/*je place les éléments en position:fixed; pour qu'ils ne se décalle pas*/
.grossecaisse{
position:fixed;
  background:#190707;
border-radius: 50%;
	width: 27%;
	height: 27%; 
	margin-left: 40%;
  border:2px solid #679403; 
/*j'indique qu'on peut cliquer dessus*/
  cursor:pointer;
}

/*je dessine le corps de la grossecaisse*/
.grossecaisse:after{
  content: "";  

position:absolute;
  background:#FF0000;
border-radius: 8%;
	width: 22%;
	height: 19%; 
	margin-left: 0%;
	margin-top: 7%;
  border:3px solid #679403; 
  cursor:pointer;
}

/*je fais bouger la grosse caisse sur la droite*/
.grossecaisse:active{
  -webkit-transform:perspective(41%) rotateX(-10deg);
  transform:perspective(41%) rotateX(-10deg);
	margin-left: 41%;
}

.tombasse{
position:fixed;
  background:#FF0000;
border-radius: 8%;
	width: 20%;
	height: 19%; 
	margin-left: 60%;
	margin-top: 5%;
  border:3px solid #679403; 
  cursor:pointer;
}
.tombasse:after{
  content: "";  

position:absolute;
  background:#190707;
border-radius: 50%;
	width: 12%;
	height: 100%; 
	margin-left: 92%;

  border:2px solid #679403; 
/* je mets tout a 50% le premier est la distance entre le centre et la largeur*/
/* le deuxième est la distance entre le centre et la hauteur*/
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
  cursor:pointer;
}

/*je fais bouger tombasse sur la droite*/
.tombasse:active{
  -webkit-transform:perspective(93%) rotateX(-10deg);
  transform:perspective(93%) rotateX(-10deg);
	margin-left: 93%;
}

.cymbaleride{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 20%;
	height: 15%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 15%;
  border:2px solid #679403;
  cursor:pointer;
}
/*je fais bouger cymbaleride vers le bas*/
.cymbaleride:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-top: 1%;
}

.cymbaleride1{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 14%;
	height: 7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 75%;
  border:2px solid #679403;
  cursor:pointer;
}

.cymbaleride1:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-top: 1%;
}

.cymbaleride2{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 15%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 5%;
  border:2px solid #679403;
  cursor:pointer;
}

.cymbaleride2:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-top: 1%;
}

.cymbaleride3{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 20%;
	height: 15%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 18%;
		margin-top: 5%;
  border:2px solid #679403;
  cursor:pointer; 
}

.cymbaleride3:active{
  -webkit-transform:perspective(6%) rotateX(-10deg);
  transform:perspective(6%) rotateX(-10deg);
	margin-top: 6%;
}

.cymbaleride4{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 14%;
	height: 7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
    
	margin-left: 37%;
  border:2px solid #679403;
  cursor:pointer;
}


.cymbaleride4:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-top: 1%;
}

.cymbaleride5{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 16%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
    		margin-top: 5%;
	margin-left: 70%;
  border:2px solid #679403;
  cursor:pointer;
}

.cymbaleride5:active{
  -webkit-transform:perspective(6%) rotateX(-10deg);
  transform:perspective(6%) rotateX(-10deg);
	margin-top: 6%;
}

.cymbaleride6{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 15%;
	height: 7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 75%;
  border:2px solid #679403;
  cursor:pointer;
}

.cymbaleride6:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-top: 1%;
}

.cymbalecrash{
  background:#190707;
border-radius: 50%;
	width: 20%;
	height: 10%;
	margin-left: 60%;
	margin-top: 10%;
  border:2px solid #679403;
  cursor:pointer;
}

.tommedium1{
position:fixed;
  background:#FF0000;
-moz-border-radius: 12%;
-webkit-border-radius: 20% 20% 8% 8%;
border-radius: 28% 28% 8% 8%; 
	width: 10%;
	height: 19%; 
	margin-left: 55%;

  border:3px solid #679403;
  cursor:pointer;
}
.tommedium1:before{
  content: "";  
  
  position:absolute;
border-radius: 50%;
	width: 100%;
	height: 30%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
  background:#190707;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
  cursor:pointer;
  margin-top: 0%;
}

.tommedium1:active{
  -webkit-transform:perspective(52%) rotateX(-10deg);
  transform:perspective(52%) rotateX(-10deg);
	margin-left: 52%;

}

.tommedium2{
position:fixed;
  background:#FF0000;
-moz-border-radius: 12%;
-webkit-border-radius: 20% 20% 8% 8%;
border-radius: 28% 28% 8% 8%; 
	width: 10%;
	height: 19%; 
	margin-left: 60%;

  border:2px solid #679403;
  cursor:pointer;
}

.tommedium2:before{
  content: "";  
  
  position:absolute;
border-radius: 50%;
	width: 100%;
	height: 30%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
  background:#190707;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
  cursor:pointer;
}

.tommedium2:active{
  -webkit-transform:perspective(63%) rotateX(-10deg);
  transform:perspective(63%) rotateX(-10deg);
	margin-left: 63%;

}

.tommealto1{
position:fixed;
  background:#FF0000;
 border-top-right-radius: 38% 22%;
 border-top-left-radius: 38% 22%;
	width: 12%;
	height: 22%; 
	margin-left: 5%;
	margin-top: 1.5%;
  border:2px solid #679403;
-moz-border-radius: 12%;
-webkit-border-radius: 20% 20% 8% 8%;
border-radius: 28% 28% 8% 8%; 
  cursor:pointer;
}

.tommealto1:before{
  content: "";  
  
  position:absolute;
border-radius: 50%;
	width: 100%;
	height: 30%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
  background:#190707;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
  cursor:pointer;
}

.tommealto2{
position:fixed;
  background:#FF0000;
-moz-border-radius: 12%;
-webkit-border-radius: 20% 20% 8% 8%;
border-radius: 28% 28% 8% 8%; 
	width: 12%;
	height: 15%; 
	margin-left: 17%;
	margin-top: 1.5%;
  border:2px solid #679403;
  cursor:pointer;
}

.tommealto2:before{
  content: "";  
  
  position:absolute;
border-radius: 50%;
	width: 100%;
	height: 30%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
  background:#190707;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
  cursor:pointer;
}

.caisseclaire{
  background:#190707;
border-radius: 50%;
	width: 25%;
	height: 200px; 
	margin-left: 40%;

  border:2px solid #679403;
  cursor:pointer;
}

.charleston{
  background:#190707;
border-radius: 50%;
	width: 25%;
	height: 200px; 
	margin-left: 40%;

  border:2px solid #679403;
  cursor:pointer;
}
.reflet{
background-image:linear-gradient(62deg, white, red);
}

</style>

</head>

<body>

<h1>Drum sous PianoBaul git Debian Facile</h1>

<!-- en attente PianoBaul 22 94 10 100 10 0 130 5 5 5 5 5 75 25 25 75  -->

<div><audio id="1awav" src="a2.wav" preload></audio></div>
<div><audio id="1bwav" src="a3.wav" preload></audio></div>
<div><audio id="1cwav" src="a4.wav" preload></audio></div>
<div><audio id="2awav" src="z2.wav" preload></audio></div>
<div><audio id="2bwav" src="z3.wav" preload></audio></div>
<div><audio id="2cwav" src="z4.wav" preload></audio></div>
<div><audio id="3awav" src="e2.wav" preload></audio></div>
<div><audio id="3bwav" src="e3.wav" preload></audio></div>
<div><audio id="3cwav" src="e4.wav" preload></audio></div>
<div><audio id="4awav" src="r2.wav" preload></audio></div>
<div><audio id="4bwav" src="r3.wav" preload></audio></div>
<div><audio id="4cwav" src="r4.wav" preload></audio></div>
<div><audio id="5awav" src="t2.wav" preload></audio></div>
<div><audio id="5bwav" src="t3.wav" preload></audio></div>
<div><audio id="5cwav" src="t4.wav" preload></audio></div>
<div><audio id="6awav" src="y2.wav" preload></audio></div>
<div><audio id="6bwav" src="y3.wav" preload></audio></div>
<div><audio id="6cwav" src="y4.wav" preload></audio></div>
<div><audio id="7awav" src="u2.wav" preload></audio></div>
<div><audio id="7bwav" src="u3.wav" preload></audio></div>
<div><audio id="7cwav" src="u4.wav" preload></audio></div>
<div><audio id="8awav" src="i2.wav" preload></audio></div>
<div><audio id="8bwav" src="i3.wav" preload></audio></div>
<div><audio id="8cwav" src="i4.wav" preload></audio></div>
<div><audio id="9awav" src="o2.wav" preload></audio></div>
<div><audio id="9bwav" src="o3.wav" preload></audio></div>
<div><audio id="9cwav" src="o4.wav" preload></audio></div>
<div><audio id="10awav" src="p2.wav" preload></audio></div>
<div><audio id="10bwav" src="p3.wav" preload></audio></div>
<div><audio id="10cwav" src="p4.wav" preload></audio></div>
<div><audio id="11awav" src="q2.wav" preload></audio></div>
<div><audio id="11bwav" src="q3.wav" preload></audio></div>
<div><audio id="11cwav" src="q4.wav" preload></audio></div>
<div><audio id="12awav" src="s2.wav" preload></audio></div>
<div><audio id="12bwav" src="s3.wav" preload></audio></div>
<div><audio id="12cwav" src="s4.wav" preload></audio></div>
<div><audio id="13awav" src="d2.wav" preload></audio></div>
<div><audio id="13bwav" src="d3.wav" preload></audio></div>
<div><audio id="13cwav" src="d4.wav" preload></audio></div>
<div><audio id="14awav" src="f2.wav" preload></audio></div>
<div><audio id="14bwav" src="f3.wav" preload></audio></div>
<div><audio id="14cwav" src="f4.wav" preload></audio></div>
<div><audio id="15awav" src="g2.wav" preload></audio></div>
<div><audio id="15bwav" src="g3.wav" preload></audio></div>
<div><audio id="15cwav" src="g4.wav" preload></audio></div>
<div><audio id="16awav" src="h2.wav" preload></audio></div>
<div><audio id="16bwav" src="h3.wav" preload></audio></div>
<div><audio id="16cwav" src="h4.wav" preload></audio></div>
<div><audio id="17awav" src="j2.wav" preload></audio></div>
<div><audio id="17bwav" src="j3.wav" preload></audio></div>
<div><audio id="17cwav" src="j4.wav" preload></audio></div>
<div><audio id="18awav" src="k2.wav" preload></audio></div>
<div><audio id="18bwav" src="k3.wav" preload></audio></div>
<div><audio id="18cwav" src="k4.wav" preload></audio></div>
<div><audio id="19awav" src="l2.wav" preload></audio></div>
<div><audio id="19bwav" src="l3.wav" preload></audio></div>
<div><audio id="19cwav" src="l4.wav" preload></audio></div>
<div><audio id="20awav" src="m2.wav" preload></audio></div>
<div><audio id="20bwav" src="m3.wav" preload></audio></div>
<div><audio id="20cwav" src="m4.wav" preload></audio></div>
<div><audio id="21awav" src="w2.wav" preload></audio></div>
<div><audio id="21bwav" src="w3.wav" preload></audio></div>
<div><audio id="21cwav" src="w4.wav" preload></audio></div>
<div><audio id="22awav" src="x2.wav" preload></audio></div>
<div><audio id="22bwav" src="x3.wav" preload></audio></div>
<div><audio id="22cwav" src="x4.wav" preload></audio></div>
<div><audio id="23awav" src="c2.wav" preload></audio></div>
<div><audio id="23bwav" src="c3.wav" preload></audio></div>
<div><audio id="23cwav" src="c4.wav" preload></audio></div>
<div><audio id="24awav" src="v2.wav" preload></audio></div>
<div><audio id="24bwav" src="v3.wav" preload></audio></div>
<div><audio id="24cwav" src="v4.wav" preload></audio></div>
<div><audio id="25awav" src="b2.wav" preload></audio></div>
<div><audio id="25bwav" src="b3.wav" preload></audio></div>
<div><audio id="25cwav" src="b4.wav" preload></audio></div>
<div><audio id="26awav" src="n2.wav" preload></audio></div>
<div><audio id="26bwav" src="n3.wav" preload></audio></div>
<div><audio id="26cwav" src="n4.wav" preload></audio></div>

<!-- zone1 de dessin -->


<div class="position1">
<div class="cymbaleride" onMouseDown="cymbaleridePress();" onMouseUp="toucheUp();"><audio id="3wav" src="c1.wav" preload></audio></div>
<div class="cymbaleride1" onMouseDown="cymbaleride1Press();" onMouseUp="toucheUp();"><audio id="4wav" src="d1.wav" preload></audio></div>
</div>

<!-- zone2 de dessin -->

<div class="position2">
<div class="cymbaleride2" onMouseDown="cymbaleride2Press();" onMouseUp="toucheUp();"><audio id="5wav" src="e1.wav" preload></audio></div>
<div class="cymbaleride3" onMouseDown="cymbaleride3Press();" onMouseUp="toucheUp();"><audio id="6wav" src="f1.wav" preload></audio></div>
<div class="cymbaleride4" onMouseDown="cymbaleride4Press();" onMouseUp="toucheUp();"><audio id="7wav" src="g1.wav" preload></audio></div>
      <!-- je varie l'intensité du blanc au rouge avec la classe reflet -->
<div class="tommedium2 reflet" onMouseDown="tommedium2Press();" onMouseUp="toucheUp();"><audio id="11wav" src="k1.wav" preload></audio></div>
<div class="tommedium1 reflet" onMouseDown="tommedium1Press();" onMouseUp="toucheUp();"><audio id="10wav" src="j1.wav" preload></audio></div>
<div class="cymbaleride5" onMouseDown="cymbaleride5Press();" onMouseUp="toucheUp();"><audio id="8wav" src="h1.wav" preload></audio></div>
<div class="cymbaleride6" onMouseDown="cymbaleride6Press();" onMouseUp="toucheUp();"><audio id="9wav" src="i1.wav" preload></audio></div>
</div>

<!-- zone3 de dessin -->



<div class="position3">
<div class="pied1"></div>
<div class="piedpencher1"></div>
<div class="piedpencher2"></div>
<div class="tommealto1 reflet" onMouseDown="tommealto1Press();" onMouseUp="toucheUp();"><audio id="12wav" src="l1.wav" preload></audio></div>
<div class="tommealto2 reflet" onMouseDown="tommealto2Press();" onMouseUp="toucheUp();"><audio id="13wav" src="m1.wav" preload></audio></div>
<div class="tombasse" onMouseDown="tombassePress();" onMouseUp="toucheUp();"><audio id="2wav" src="b1.wav" preload></audio></div>
<div class="grossecaisse" onMouseDown="grossecaissePress();" onMouseUp="toucheUp();"><audio id="1wav" src="a1.wav" preload></audio></div>
</div>



</body>
</html> 

Je suis toujours à la recherche de DEV, il y a tout à construire.

Cordialement

Dernière modification par temps (Le 09/06/2015, à 17:11)


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

#7 Le 09/06/2015, à 19:13

temps

Re : menu css3

Bonjour,
Si vous avez suivit le tutoriel du code de mon dernier message, vous vous êtes certainement aperçu qu'à l'instant t, nous pouvons :
Créer une vidéo interactive entièrement en html5, selon l'action (clavier ou souris) nous implquons un lien vers la page animées (html5) suivante.

Est-ce que quelqu'un est partant pour créer une anim html5 ?
En respectant la loi de code donné sur ce fil, le but est de jouer à créer en groupe, un truc juste pour le fun

Cordialement


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

#8 Le 12/06/2015, à 04:52

temps

Re : menu css3

Bonjour,
Dans la meta gestion des construction, nous pouvons créer une zone d'affichage, indépendante.

En exemple on cré une variable, et on attache un mot ou une fonction d'affichage différent à chaque valeur de cette variable.
Ensuite on reprend la fonction d'incrémentation que j'ai créé dans le multi-touche. et enfin on ajoute pour les endroits ou on veut juste un clignotement de l'affichage :

function ilacliquerUp(){
  document.getElementById('monid1').innerHTML='';
}
function ilacliquerUp(){
  document.getElementById('monid2').innerHTML='';
}

Ainsi on aura dans une zone de l'écran une partie fixe avec seulement un texte ou une image qui varie à chaque clique, les combinaisons sont à déterminées selon les besoins. La fonction devant être ajouté dans la partie html dans chaque zone de clique contenant un onMouseDown


Sans passer dans le meta construction, cette fonction de clignotement peut permettre aussi un action locale.
En exemple : on map à l'aide d'un identifiant chaque instrument et on lance un défilement dans le map de terme comme : Boum, BadaBoum, ... en ajoutant ilacliquer au onMouseDown

Dernière modification par temps (Le 12/06/2015, à 05:05)


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

#9 Le 15/06/2015, à 04:48

temps

Re : menu css3

Bonjour,

J"ai ajouté quelques piano de démo orgues, ...
Je suis toujours à la recherche d'un sponsor pour pouvoir acheter l'hébergement multimédia.
Dès que j'ai l'hébergement multimédia, je vais ajouter dessus l'application de lecture de texte que j'avais écrit dans lm3jo il y a 3 ans (lm3jo qui fut dans la doc ubuntu avant sa destruction). Le html5 me permet de lire le texte affiché à l'écran.

J'ai commencé un film inter-actif en html5, mais c'est du travail, car à la création je me suis aperçu qu'il fallait un scénario, et créer de nombreux document audio et vidéo. En d'autres mots, c'est beaucoup plus de travail qu'un film classique.

Cordialement

Dernière modification par temps (Le 15/06/2015, à 04:49)


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

#10 Le 19/06/2015, à 15:03

temps

Re : menu css3

Bonjour,

Au sujet du film inter-actif en HTLM5

Les scénarios du film sont à préparer en premier, et ensuite comme pour l'audio les différents déroulement du film sont gérés en javascript à l'aide de variables manipulées par de if else

Si nous entrons le code vidéo en préchargement,

 <!-- je mets les vidéos en mémoire --> 
          <div> <video id="1UBUNTU" src="video/1.ogv" preload></video></div>

Contrairement à l'audio nous allons avoir l'affichage d'une image.

Je ne dis pas posséder la meilleure solution, mais j'ai mis au point une solution qui marche.
J'ai en premier créé deux styles

    .pourpetit{
    position:fixed;
  height:0.01%;
  width:0.01%;
  margin-top:99%;
}

    .pourgrand{
  height:20%;
  width:20%;
  margin-top:9%;
}

un qui masque les images que je place en bas pour éviter d'avoir un effet de décalage selon la vidéo active. L'autre que je place à l'endroit désiré. Ensuite je place dans la gestion logique d'affichage du scénario les styles et l'activation ou désactivation des vidéos.

    	  function multitouchea(){

  if(mua1==0){
    document.getElementById('4UBUNTU').className = 'pourpetit';
  document.getElementById('1UBUNTU').className = 'pourgrand';
  var multil1 = document.getElementById("1UBUNTU");
  multil1.play();
  }
  else if(mua1==1){
    document.getElementById('1UBUNTU').className = 'pourpetit';
  document.getElementById('2UBUNTU').className = 'pourgrand';
  var multil2 = document.getElementById("2UBUNTU");
  multil1.stop();
  multil2.play();
  }
  else if(mua1==2){
    document.getElementById('2UBUNTU').className = 'pourpetit';
  document.getElementById('3UBUNTU').className = 'pourgrand';
  var multil3 = document.getElementById("3UBUNTU");
  multil2.stop();
  multil3.play();
  }
  else if(mua1==3){

    document.getElementById('3UBUNTU').className = 'pourpetit';
  document.getElementById('4UBUNTU').className = 'pourgrand';
  var multil4 = document.getElementById("4UBUNTU");
  multil3.stop();
  multil4.play();
  }
  }
  

    	  function multitoucheb(){

  if(mua2==0){

  document.getElementById('1UBUNTU').className = 'pourgrand';
  var multil1 = document.getElementById("1UBUNTU");
  multil1.play();
  }
  else if(mua2==1){
    document.getElementById('1UBUNTU').className = 'pourpetit';
  document.getElementById('2UBUNTU').className = 'pourgrand';
  var multil2 = document.getElementById("2UBUNTU");
  multil1.stop();
  multil2.play();
  }
  else if(mua2==2){
    document.getElementById('2UBUNTU').className = 'pourpetit';
  document.getElementById('3UBUNTU').className = 'pourgrand';
  var multil3 = document.getElementById("3UBUNTU");
  multil2.stop();
  multil3.play();
  }
  else if(mua2==3){

    document.getElementById('3UBUNTU').className = 'pourpetit';
  document.getElementById('4UBUNTU').className = 'pourgrand';
  var multil4 = document.getElementById("4UBUNTU");
  multil3.stop();
  multil4.play();
  }
  }

Le préchargement des vidéos devient

          <div> <video class="pourpetit" id="1UBUNTU" src="video/1.ogv" preload></video></div>
          <div> <video class="pourpetit" id="2UBUNTU" src="video/2.ogv" preload></video></div>
          <div> <video class="pourpetit" id="3UBUNTU" src="video/3.ogv" preload></video></div>
          <div> <video class="pourpetit" id="4UBUNTU" src="video/4.ogv" preload></video></div>

Avec le basculement rendant la vidéo active visible se faisant par le style

Pour mapper la page de la vidéo, j'utilise la balise objet pour appeler d'autres page

<object onMouseDown="touchevideo2Press();" data="prenom_1/pourintro.html" type="text/html" width="20%" height="15%">
  alt : <a href="prenom_1/pourintro.html">intro 1</a>
</object>

<object data="prenom_2/pourintro.html" type="text/html" width="20%" height="15%">
  alt : <a href="prenom_2/pourintro.html">intro 1</a>
</object>
    </body>


<object data="prenom_3/pourintro.html" type="text/html" width="20%" height="15%">
  alt : <a href="prenom_3/pourintro.html">intro 1</a>
</object>

En l'état le onMouseDown ne fonctionne pas, mais je dois en premier écrire les scénario (un truc un peu mieux, avec des objets qui se déplacent par dessus si pas de réaction, ... ) En fait ici le plus dure , c'est d'écrire un bon scénario, je pense que la partie code n'est plus qu'une histoire de temps disponible.

Si quelqu'un a une idée de bons scénarios, je suis preneur

Cordialement


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

#11 Le 25/06/2015, à 22:46

temps

Re : menu css3

Bonjour,

Pour mapper le fond d'écran sous le film, actuellement je teste pour trouver la meilleure solution.
Sur celle-ci, je fait une capture de fond blanc que je nomme 1.png, ensuite j'entre ce code :

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Comment identifier la position pour film interactif</title>

    <style>
#zone1 {
    width: 100%;
    height: 100%;
    background: "1.png";
    position:fixed;
}
a#zone2, a#zone3, a#zone4, a#zone5, a#zone6, a#zone7, a#zone8, a#zone9, a#zone10, a#zone11, a#zone12, a#zone13, a#zone14, a#zone15, a#zone16, a#zone17, a#zone18, a#zone19, a#zone20, a#zone21, a#zone22, a#zone23, a#zone24, a#zone25, a#zone26 {
    position: absolute;
    display: block;
    background: transparent;
    overflow: hidden;
    text-indent: -9999px; 
}
#zone2{
    width: 19.9%;
    height: 19.9%;
}
#zone3{
    left: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone4{
    left: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone5{
    left: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone6{
    left: 80%;
    width: 19.9%;
    height: 19.9%;
}
#zone7{
    top: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone8{
    top: 20%;
    left: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone9{
    top: 20%;
    left: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone10{
    top: 20%;
    left: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone11{
    top: 20%;
    left: 80%;
    width: 19.9%;
    height: 19.9%;
}
#zone12{
    top: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone13{
    top: 40%;
    left: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone14{
    top: 40%;
    left: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone15{
    top: 40%;
    left: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone16{
    top: 40%;
    left: 80%;
    width: 19.9%;
    height: 19.9%;
}
#zone17{
    top: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone18{
    top: 60%;
    left: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone19{
    top: 60%;
    left: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone20{
    top: 60%;
    left: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone21{
    top: 60%;
    left: 80%;
    width: 19.9%;
    height: 19.9%;
}
#zone22{
    top: 80%;
    width: 19.9%;
    height: 19.9%;
}
#zone23{
    top: 80%;
    left: 20%;
    width: 19.9%;
    height: 19.9%;
}
#zone24{
    top: 80%;
    left: 40%;
    width: 19.9%;
    height: 19.9%;
}
#zone25{
    top: 80%;
    left: 60%;
    width: 19.9%;
    height: 19.9%;
}
#zone26{
    top: 80%;
    left: 80%;
    width: 19.9%;
    height: 19.9%;
}



}

    </style>

</head>

<body>

<a id="zone1"> 
   <a id="zone2" title="zone 2" href="#"><audio id="1wav" src="1.wav" preload></audio></a>
   <a id="zone3" title="zone 3" href="#"><audio id="35wav" src="81.wav" preload></audio></a>
   <a id="zone4" title="zone 4" href="#">zone4</a>
   <a id="zone5" title="zone 5" href="#">zone5</a>
   <a id="zone6" title="zone 6" href="#">zone6</a>
   <a id="zone7" title="zone 7" href="#">zone7</a>
   <a id="zone8" title="zone 8" href="#">zone8</a>
   <a id="zone9" title="zone 9" href="#">zone9</a>
   <a id="zone10" title="zone 10" href="#">zone10</a>
   <a id="zone11" title="zone 11" href="#">zone11</a>
   <a id="zone12" title="zone 12" href="#">zone12</a>
   <a id="zone13" title="zone 13" href="#">zone13</a>
   <a id="zone14" title="zone 14" href="#">zone14</a>
   <a id="zone15" title="zone 15" href="#">zone15</a>
   <a id="zone16" title="zone 16" href="#">zone16</a>
   <a id="zone17" title="zone 17" href="#">zone17</a>
   <a id="zone18" title="zone 18" href="#">zone18</a>
   <a id="zone19" title="zone 19" href="#">zone19</a>
   <a id="zone20" title="zone 20" href="#">zone20</a>
   <a id="zone21" title="zone 21" href="#">zone21</a>
   <a id="zone22" title="zone 22" href="#">zone22</a>
   <a id="zone23" title="zone 23" href="#">zone23</a>
   <a id="zone24" title="zone 24" href="#">zone24</a>
   <a id="zone25" title="zone 25" href="#">zone25</a>
   <a id="zone26" title="zone 26" href="#">zone26</a>

<div  id="zone26" onMouseDown="touchenoire35Press();"  ><audio id="35wav" src="81.wav" preload></audio></div>

</div>

</body>

</html> 

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

#12 Le 07/07/2015, à 05:12

temps

Re : menu css3

Bonjour,
Je vais reprendre les dessins symboliques des instruments de musiques en css.
Je commence par le saxo. Une suite de ronds ovales alignée en forme de courbes.
Un premier jet :

<!DOCTYPE html>
<html>

<head>

<title>PianoBaul en HTML5 zone 3 saxophone 1</title>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/zone3/f1/x/" />
<link rel="alternate" media="handheld" href="http://www.letime.net/PianoBaul/zone3/f1/x/" />


<meta name="description" content="PianoBaul en HTML5 zone 3 saxophone 1 application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />



<script type="text/javascript">


if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/zone3/f1/a1/x/";
}

    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;
    	 var mua27 = 0;
    	 var mua28 = 0;
    	 var mua29 = 0;
    	 var mua30 = 0;
    	 var mua31 = 0;
    	 var mua32 = 0;
    	 var mua33 = 0;
    	 var mua34 = 0;
    	 var mua35 = 0;
    	 var mua36 = 0;
   	 

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;
   	
    	case "0":
    	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
   	break;
   	
    	case "1":
    	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
   	break;
   	
    	case "2":
    	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
   	break;
   	
    	case "3":
    	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
   	break;
   	
    	case "4":
    	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
   	break;
   	
    	case "5":
    	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
   	break;
   	
    	case "6":
    	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
   	break;
   	
    	case "7":
    	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
   	break;
   	
    	case "8":
    	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
   	break;
   	
    	case "9":
    	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
   	break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



  
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("34wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("34awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("34bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("34cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }



function key36Press(){
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function key35Press(){
	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
  }
function key34Press(){
	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
  }  
function key33Press(){
	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
  }
function key32Press(){
	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
  }
function key31Press(){
	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchey(mua6);
  }
function key30Press(){
	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
  }
function key29Press(){
	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
  }
function key28Press(){
	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
  }
function key27Press(){
	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
  }
function key26Press(){
	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
  }
function key25Press(){
	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
  }
function key24Press(){
	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
  }
function key23Press(){
	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
  }
function key22Press(){
	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
  } 
function key21Press(){
	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
  }
function key20Press(){
	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
  }
function key19Press(){
	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
  }  
function key18Press(){
	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
  }
function key17Press(){
	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
  }
function key16Press(){
	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
  }
function key15Press(){
	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
  }
function key14Press(){
	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
  }
function key13Press(){
	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
  }
function key12Press(){
	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
  }
function key11Press(){
	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
  }
function key10Press(){
	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
  }
function key9Press(){
	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
  }
function key8Press(){
	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
  }
function key7Press(){
	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
  }
function key6Press(){
	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
  }
function key5Press(){
	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
  }
function key4Press(){
	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
  }
function key3Press(){
	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
  }
function key2Press(){
	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
  } 
function key1Press(){
	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
  }  


      

     
function keyUp(){
  document.getElementById('montre').innerHTML='';
}
function keyUp(){
  document.getElementById('montre').innerHTML='';
}
   


</script>

<style>
/* je centre le titre de la page*/
h1 { text-align: center }

/* 1-je dessine en premier ce qui est statique au fond destiné a être couvert en partie*/



.pied1 {
position:fixed;
margin-top: 18%;
margin-left: 11%;
    width: 0.9%;
    height: 5%;
    background: #c9c0bb;
}

.piedpencher1{
position:fixed;
margin-top: 18%;
margin-left: 14%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
}

.piedpencher2{
position:fixed;
margin-top: 18%;
margin-left: 8%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(150deg);
	-moz-transform:skew(150deg);
	-o-transform:skew(150deg);
	tranform:skew(150deg);
}
/*2- je place en second les différentes hauteur que j'ajuste par élément avec un top-margin*/

.position1{
	margin-top: 5%;
	}
.position2{
	margin-top: 25%;
	}
.position3{
	margin-top: 40%;
	}
.position4{
	margin-top: 7%;
	}


.key1{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 6.5%;
	margin-top: 2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 */
.key1:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 5.5%;
}

.key2{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 11%;
	margin-top: 2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key2:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 12%;
}

.key3{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
    border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 13.5%;
	margin-top: 4.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key3:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 12.5%;
}

.key4{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 16%;
	margin-top: 6.5%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key4:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 15%;
}

.key5{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 18.5%;
	margin-top: 8.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}


.key5:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 17.5%;
}

.key6{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 21%;
	margin-top: 11%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key6:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 20%;
}

.key7{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 23.5%;
	margin-top: 13.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key7:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 22.5%
}
.key8{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 26%;
	margin-top: 15.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}


/*je fais bouger sur la droite*/
.key8:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 25%;
}


.key9{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.8%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 28.5%;
	margin-top: 17.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}

/*je fais bouger key9 sur la droite*/
.key9:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 27.5%;
}

.key10{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 31%;
	margin-top: 19.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key10:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 30%;

}

.key11{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 33.5%;
	margin-top: 22%;
  border:1.5px solid #679403;
  cursor:pointer;
}


.key11:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 32.5%;

}

.key12{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 36%;
	margin-top: 24.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key12:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 35%;

}




.key13{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 37.5%;
	margin-top: 26.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key13:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 36.5%;

}

.key14{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 39%;
	margin-top: 28.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key14:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 38%;

}

.key15{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 40.5%;
	margin-top: 30.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key15:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 39.5%;

}


.key16{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 42%;
	margin-top: 33%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key16:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 41%;

}

.key17{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.7%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 43.5%;
	margin-top: 35.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 */
.key17:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 42.5%;
}

.key18{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.8%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 45%;
	margin-top: 37.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key18:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 44%;
}

.key19{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.9%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 46.5%;
	margin-top: 39.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key19:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 45.5%;
}

.key20{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 48%;
	margin-top: 41.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key20:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 47%;
}

.key21{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 49.5%;
	margin-top: 44%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key21:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 48.5%;
}


.key22{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 51%;
	margin-top: 46.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key22:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 50%;
}

.key23{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 53%;
	margin-top: 48.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key23:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 52%;
}


.key24{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 55%;
	margin-top: 50.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key24:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 54%;
}


.key25{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 61%;
	margin-top: 48%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key25:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 62%;
}


.key26{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.1%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 61.5%;
	margin-top: 44%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key26:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 62.5%;
}

.key27{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.2%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 62%;
	margin-top: 40%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key27:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 63%;
}

.key28{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.2%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 62.5%;
	margin-top: 36%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key28:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 63.5%;
}

.key29{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.3%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 63%;
	margin-top: 32%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key29:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 64%;
}

.key30{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.4%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 66%;
	margin-top: 28%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key30:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 67%;
}


.key31{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.5%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 69%;
	margin-top: 24%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key31:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 70%;
}

.key32{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.6%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 72%;
	margin-top: 20%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key32:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 73%;
}

.key33{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 75%;
	margin-top: 16%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key33:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 76%;
}

.key34{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 76%;
	margin-top: 12%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key34:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 77%;
}

.key35{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 77%;
	margin-top: 7%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key35:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 78%;
}

.key36{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 12%;
	height: 17%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 85%;
	margin-top: 4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key36:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 87%;
}

.reflet{
background-image:linear-gradient(62deg, white, red);
}

.refletjaune{
background-image:linear-gradient(62deg, white, #DBA901);
}


.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}  

</style>

</head>

<body>

<header> 

 <div id="choix"> 
<ul class="menu">
  <li>lois
    <ul>
      <li><div id="zone3"><input type="button" value="zone3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/'"></div></li>
	
    </ul>
  </li><li>a
    <ul>
      <li><div id="a1"><input type="button" value="a1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/a1/'"></div></li>

    </ul>
  </li><li>b
    <ul>
      <li><div id="b1"><input type="button" value="b1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/b1/'"></div></li>

    </ul>

  </li><li>c
    <ul>
      <li><div id="c1"><input type="button" value="c1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/c1/'"></div></li>

    </ul>

  </li><li>d
    <ul>
      <li><div id="d1"><input type="button" value="d1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d1/'"></div></li>
      <li><div id="d2"><input type="button" value="d2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d2/'"></div></li>

    </ul>
  </li><li>e
    <ul>
      <li><div id="e1"><input type="button" value="e1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/e1/'"></div></li>

    </ul>

  </li><li>f
    <ul>
      <li><div id="f1"><input type="button" value="f1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f1/'"></div></li>

    </ul>

  </li><li>Zone
    <ul>
      <li><div id="Marteau"><input type="button" value="zone1" onclick="location.href='http://www.letime.net/PianoBaul/'"></div></li>
      <li><div id="zone2"><input type="button" value="zone2" onclick="location.href='http://www.letime.net/PianoBaul/zone2/'"></div></li>
    </ul>

  </li><li>Telechargement
    <ul>

      <li><div id="generateur"><input type="button" value="generateur" onclick="location.href='http://www.letime.net/PianoBaul/src.tar.gz'"></div></li>
      <li><div id="cours"><input type="button" value="cours" onclick="location.href='http://letime.net/cours/'" ></div></li>
      <li><div id="wiki"><input type="button" value="wiki" onclick="location.href='http://debian-facile.org/projets:sequenbaul'" ></div></li>
    </ul>
  </li>
</ul>

</div>

</header> 


<!-- en attente PianoBaul 22 94 10 100 10 0 130 5 5 5 5 5 75 25 25 75  -->

<div><audio id="1awav" src="http://www.letime.net/PianoBaul/zone3/f1/a2.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/zone3/f1/a3.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/zone3/f1/a4.wav" preload></audio></div>
<div><audio id="1dwav" src="http://www.letime.net/PianoBaul/zone3/f1/a5.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/zone3/f1/z2.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/zone3/f1/z3.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/zone3/f1/z4.wav" preload></audio></div>
<div><audio id="2dwav" src="http://www.letime.net/PianoBaul/zone3/f1/z5.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/zone3/f1/e2.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/zone3/f1/e3.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/zone3/f1/e4.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/zone3/f1/r2.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/zone3/f1/r3.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/zone3/f1/r4.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/zone3/f1/t2.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/zone3/f1/t3.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/zone3/f1/t4.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/zone3/f1/y2.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/zone3/f1/y3.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/zone3/f1/y4.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/zone3/f1/u2.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/zone3/f1/u3.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/zone3/f1/u4.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/zone3/f1/i2.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/zone3/f1/i3.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/zone3/f1/i4.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/zone3/f1/o2.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/zone3/f1/o3.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/zone3/f1/o4.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/zone3/f1/p2.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/zone3/f1/p3.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/zone3/f1/p4.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/zone3/f1/q2.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/zone3/f1/q3.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/zone3/f1/q4.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/zone3/f1/s2.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/zone3/f1/s3.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/zone3/f1/s4.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/zone3/f1/d2.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/zone3/f1/d3.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/zone3/f1/d4.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/zone3/f1/f2.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/zone3/f1/f3.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/zone3/f1/f4.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/zone3/f1/g2.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/zone3/f1/g3.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/zone3/f1/g4.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/zone3/f1/h2.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/zone3/f1/h3.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/zone3/f1/h4.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/zone3/f1/j2.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/zone3/f1/j3.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/zone3/f1/j4.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/zone3/f1/k2.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/zone3/f1/k3.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/zone3/f1/k4.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/zone3/f1/l2.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/zone3/f1/l3.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/zone3/f1/l4.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/zone3/f1/m2.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/zone3/f1/m3.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/zone3/f1/m4.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/zone3/f1/w2.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/zone3/f1/w3.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/zone3/f1/w4.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/zone3/f1/x2.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/zone3/f1/x3.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/zone3/f1/x4.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/zone3/f1/c2.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/zone3/f1/c3.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/zone3/f1/c4.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/zone3/f1/v2.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/zone3/f1/v3.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/zone3/f1/v4.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/zone3/f1/b2.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/zone3/f1/b3.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/zone3/f1/b4.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/zone3/f1/n2.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/zone3/f1/n3.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/zone3/f1/n4.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/zone3/f1/02.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/zone3/f1/03.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/zone3/f1/04.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/zone3/f1/12.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/zone3/f1/13.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/zone3/f1/14.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/zone3/f1/22.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/zone3/f1/23.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/zone3/f1/24.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/zone3/f1/32.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/zone3/f1/33.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/zone3/f1/34.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/zone3/f1/42.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/zone3/f1/43.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/zone3/f1/44.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/zone3/f1/52.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/zone3/f1/53.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/zone3/f1/54.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/zone3/f1/62.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/zone3/f1/63.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/zone3/f1/64.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/zone3/f1/72.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/zone3/f1/73.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/zone3/f1/74.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/zone3/f1/82.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/zone3/f1/83.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/zone3/f1/84.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/zone3/f1/92.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/zone3/f1/93.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/zone3/f1/94.wav" preload></audio></div>

<!-- zone1 de dessin -->


<div class="position1">
<div class="key1 refletjaune" onMouseDown="key1Press();" onMouseUp="toucheUp();"><audio id="36wav" src="http://www.letime.net/PianoBaul/zone3/f1/91.wav" preload></audio></div>
<div class="key2" onMouseDown="key2Press();" onMouseUp="toucheUp();"><audio id="35wav" src="http://www.letime.net/PianoBaul/zone3/f1/81.wav" preload></audio></div>
<div class="key3 refletjaune" onMouseDown="key3Press();" onMouseUp="toucheUp();"><audio id="34wav" src="http://www.letime.net/PianoBaul/zone3/f1/71.wav" preload></audio></div>
<div class="key4" onMouseDown="key4Press();" onMouseUp="toucheUp();"><audio id="33wav" src="http://www.letime.net/PianoBaul/zone3/f1/61.wav" preload></audio></div>
<div class="key5 refletjaune" onMouseDown="key5Press();" onMouseUp="toucheUp();"><audio id="32wav" src="http://www.letime.net/PianoBaul/zone3/f1/51.wav" preload></audio></div>
<div class="key6 reflet" onMouseDown="key6Press();" onMouseUp="toucheUp();"><audio id="31wav" src="http://www.letime.net/PianoBaul/zone3/f1/41.wav" preload></audio></div>
<div class="key7  refletjaune" onMouseDown="key7Press();" onMouseUp="toucheUp();"><audio id="30wav" src="http://www.letime.net/PianoBaul/zone3/f1/31.wav" preload></audio></div>
<div class="key8" onMouseDown="key8Press();" onMouseUp="toucheUp();"><audio id="29wav" src="http://www.letime.net/PianoBaul/zone3/f1/21.wav" preload></audio></div>
<div class="key9 refletjaune" onMouseDown="key9Press();" onMouseUp="toucheUp();"><audio id="28wav" src="http://www.letime.net/PianoBaul/zone3/f1/11.wav" preload></audio></div>
<div class="key10 reflet" onMouseDown="key10Press();" onMouseUp="toucheUp();"><audio id="27wav" src="http://www.letime.net/PianoBaul/zone3/f1/01.wav" preload></audio></div>
<div class="key11  refletjaune" onMouseDown="key11Press();" onMouseUp="toucheUp();"><audio id="26wav" src="http://www.letime.net/PianoBaul/zone3/f1/n1.wav" preload></audio></div>
<div class="key12 reflet" onMouseDown="key12Press();" onMouseUp="toucheUp();"><audio id="25wav" src="http://www.letime.net/PianoBaul/zone3/f1/b1.wav" preload></audio></div>
<div class="key13  refletjaune" onMouseDown="key13Press();" onMouseUp="toucheUp();"><audio id="24wav" src="http://www.letime.net/PianoBaul/zone3/f1/v1.wav" preload></audio></div>
<div class="key14 reflet" onMouseDown="key14Press();" onMouseUp="toucheUp();"><audio id="23wav" src="http://www.letime.net/PianoBaul/zone3/f1/c1.wav" preload></audio></div>
<div class="key15  refletjaune" onMouseDown="key15Press();" onMouseUp="toucheUp();"><audio id="22wav" src="http://www.letime.net/PianoBaul/zone3/f1/x1.wav" preload></audio></div>
<div class="key16 reflet" onMouseDown="key16Press();" onMouseUp="toucheUp();"><audio id="21wav" src="http://www.letime.net/PianoBaul/zone3/f1/w1.wav" preload></audio></div>
<div class="key17  refletjaune" onMouseDown="key17Press();" onMouseUp="toucheUp();"><audio id="20wav" src="http://www.letime.net/PianoBaul/zone3/f1/m1.wav" preload></audio></div>
<div class="key18 reflet" onMouseDown="key18Press();" onMouseUp="toucheUp();"><audio id="19wav" src="http://www.letime.net/PianoBaul/zone3/f1/l1.wav" preload></audio></div>
<div class="key19  refletjaune" onMouseDown="key19Press();" onMouseUp="toucheUp();"><audio id="18wav" src="http://www.letime.net/PianoBaul/zone3/f1/k1.wav" preload></audio></div>
<div class="key20 reflet" onMouseDown="key20Press();" onMouseUp="toucheUp();"><audio id="17wav" src="http://www.letime.net/PianoBaul/zone3/f1/j1.wav" preload></audio></div>
<div class="key21  refletjaune" onMouseDown="key21Press();" onMouseUp="toucheUp();"><audio id="16wav" src="http://www.letime.net/PianoBaul/zone3/f1/h1.wav" preload></audio></div>
<div class="key22 reflet" onMouseDown="key22Press();" onMouseUp="toucheUp();"><audio id="15wav" src="http://www.letime.net/PianoBaul/zone3/f1/g1.wav" preload></audio></div>
<div class="key23  refletjaune" onMouseDown="key23Press();" onMouseUp="toucheUp();"><audio id="14wav" src="http://www.letime.net/PianoBaul/zone3/f1/f1.wav" preload></audio></div>
<div class="key24 reflet" onMouseDown="key24Press();" onMouseUp="toucheUp();"><audio id="13wav" src="http://www.letime.net/PianoBaul/zone3/f1/d1.wav" preload></audio></div>
<div class="key25  refletjaune" onMouseDown="key25Press();" onMouseUp="toucheUp();"><audio id="12wav" src="http://www.letime.net/PianoBaul/zone3/f1/s1.wav" preload></audio></div>
<div class="key26 reflet" onMouseDown="key26Press();" onMouseUp="toucheUp();"><audio id="11wav" src="http://www.letime.net/PianoBaul/zone3/f1/q1.wav" preload></audio></div>
<div class="key27  refletjaune" onMouseDown="key27Press();" onMouseUp="toucheUp();"><audio id="10wav" src="http://www.letime.net/PianoBaul/zone3/f1/p1.wav" preload></audio></div>
<div class="key28  refletjaune" onMouseDown="key28Press();" onMouseUp="toucheUp();"><audio id="9wav" src="http://www.letime.net/PianoBaul/zone3/f1/o1.wav" preload></audio></div>
<div class="key29  refletjaune" onMouseDown="key29Press();" onMouseUp="toucheUp();"><audio id="8wav" src="http://www.letime.net/PianoBaul/zone3/f1/i1.wav" preload></audio></div>
<div class="key30 reflet" onMouseDown="key30Press();" onMouseUp="toucheUp();"><audio id="7wav" src="http://www.letime.net/PianoBaul/zone3/f1/u1.wav" preload></audio></div>
<div class="key31  refletjaune" onMouseDown="key31Press();" onMouseUp="toucheUp();"><audio id="6wav" src="http://www.letime.net/PianoBaul/zone3/f1/y1.wav" preload></audio></div>
<div class="key32 reflet" onMouseDown="key32Press();" onMouseUp="toucheUp();"><audio id="5wav" src="http://www.letime.net/PianoBaul/zone3/f1/t1.wav" preload></audio></div>
<div class="key33  refletjaune" onMouseDown="key33Press();" onMouseUp="toucheUp();"><audio id="4wav" src="http://www.letime.net/PianoBaul/zone3/f1/r1.wav" preload></audio></div>
<div class="key34 reflet" onMouseDown="key34Press();" onMouseUp="toucheUp();"><audio id="3wav" src="http://www.letime.net/PianoBaul/zone3/f1/e1.wav" preload></audio></div>
<div class="key35  refletjaune" onMouseDown="key35Press();" onMouseUp="toucheUp();"><audio id="2wav" src="http://www.letime.net/PianoBaul/zone3/f1/z1.wav" preload></audio></div>
<div class="key36 reflet" onMouseDown="key36Press();" onMouseUp="toucheUp();"><audio id="1wav" src="http://www.letime.net/PianoBaul/zone3/f1/a1.wav" preload></audio></div>

<!-- zone3 de dessin -->




<div class="pied1"></div>
<div class="piedpencher1"></div>
<div class="piedpencher2"></div>




</body>
</html> 
 

Pour remplacer la forme actuelle

J'ai aussi jeté les bases des touches pour une forme guitare; il me reste à dessiner les contours et à ajuster le code pour éviter le dépassement de page

<!DOCTYPE html>
<html>

<head>

<title>PianoBaul en HTML5 zone 3 g1</title>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/zone3/g1/x/" />
<link rel="alternate" media="handheld" href="http://www.letime.net/PianoBaul/zone3/g1/x/" />


<meta name="description" content="Piano virtuel zone 3 consonnes en folies application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />



<script type="text/javascript">


if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/zone3/g1/x/";
}

    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;
    	 var mua27 = 0;
    	 var mua28 = 0;
    	 var mua29 = 0;
    	 var mua30 = 0;
    	 var mua31 = 0;
    	 var mua32 = 0;
    	 var mua33 = 0;
    	 var mua34 = 0;
    	 var mua35 = 0;
    	 var mua36 = 0;
   	 

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;
   	
    	case "0":
    	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
   	break;
   	
    	case "1":
    	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
   	break;
   	
    	case "2":
    	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
   	break;
   	
    	case "3":
    	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
   	break;
   	
    	case "4":
    	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
   	break;
   	
    	case "5":
    	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
   	break;
   	
    	case "6":
    	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
   	break;
   	
    	case "7":
    	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
   	break;
   	
    	case "8":
    	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
   	break;
   	
    	case "9":
    	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
   	break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



  
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("34wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("34awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("34bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("34cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }



function gratte1Press(){
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function gratte2Press(){
	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
  }
function gratte3Press(){
	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
  }  
function gratte4Press(){
	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
  }
function gratte5Press(){
	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
  }
function gratte6Press(){
	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchey(mua6);
  }
function gratte7Press(){
	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
  }
function gratte8Press(){
	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
  }
function gratte9Press(){
	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
  }
function gratte10Press(){
	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
  }
function gratte11Press(){
	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
  }
function gratte12Press(){
	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
  }
function gratte13Press(){
	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
  }
function gratte14Press(){
	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
  }
function gratte15Press(){
	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
  } 
function gratte16Press(){
	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
  }
function gratte17Press(){
	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
  }
function gratte18Press(){
	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
  }  
function gratte19Press(){
	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
  }
function gratte20Press(){
	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
  }
function gratte21Press(){
	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
  }
function gratte22Press(){
	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
  }
function gratte23Press(){
	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouched(mua23);
  }
function gratte24Press(){
	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
  }
function gratte25Press(){
	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
  }
function gratte26Press(){
	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
  }
function gratte27Press(){
	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
  }
function gratte28Press(){
	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
  }
function gratte29Press(){
	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
  }
function gratte30Press(){
	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
  }
function gratte31Press(){
	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
  }
function gratte32Press(){
	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
  }
function gratte33Press(){
	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
  }
function gratte34Press(){
	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
  }
function gratte35Press(){
	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
  } 
function gratte36Press(){
	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
  }  


      

     
function gratteUp(){
  document.getElementById('montre').innerHTML='';
}
function gratteUp(){
  document.getElementById('montre').innerHTML='';
}
   
    </script> 





    <style type="text/css">


.corde1 {

	margin-top :0.1%;

}


.corde2 {


	margin-top :15%;
}


.corde3 {


	margin-top :30%;
}


.corde4 {


	margin-top :45%;
}


.corde5 {


	margin-top :60%;
}


.corde6 {


	margin-top :75%;
}

.gratte1{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 1%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte1 */
.gratte1:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 2%;
}

/*gratte2*/


.gratte2{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 16.5%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte2 */
.gratte2:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 17.5%;
}

/*gratte3*/


.gratte3{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 32%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte3 */
.gratte3:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 33%;
}

/*gratte4*/


.gratte4{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 48.5%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte4 */
.gratte4:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 49.5%;
}

/*gratte5*/


.gratte5{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 64%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte5 */
.gratte5:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 65%;
}

/*gratte6*/


.gratte6{
position:absolute;
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
border-radius: 50%;
	width: 14.5%;
	height: 10%; 
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%;
    border-radius: 50%/50%;    
	margin-left: 80%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger gratte6 */
.gratte6:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
	margin-left: 81%;
}



.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
} 

    </style>

</head>

<body>

<header> 

 <div id="choix"> 
<ul class="menu">
  <li>lois
    <ul>
      <li><div id="zone3"><input type="button" value="zone3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/'"></div></li>
	
    </ul>
  </li><li>a
    <ul>
      <li><div id="a1"><input type="button" value="a1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/a1/'"></div></li>

    </ul>
  </li><li>b
    <ul>
      <li><div id="b1"><input type="button" value="b1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/b1/'"></div></li>

    </ul>

  </li><li>c
    <ul>
      <li><div id="c1"><input type="button" value="c1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/c1/'"></div></li>

    </ul>

  </li><li>d
    <ul>
      <li><div id="d1"><input type="button" value="d1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d1/'"></div></li>
      <li><div id="d2"><input type="button" value="d2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d2/'"></div></li>

    </ul>
  </li><li>e
    <ul>
      <li><div id="e1"><input type="button" value="e1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/e1/'"></div></li>

    </ul>

  </li><li>f
    <ul>
      <li><div id="f1"><input type="button" value="f1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f1/'"></div></li>

    </ul>

  </li><li>g
    <ul>
      <li><div id="g1"><input type="button" value="g1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g1/'"></div></li>

    </ul>

  </li><li>Zone
    <ul>
      <li><div id="Marteau"><input type="button" value="zone1" onclick="location.href='http://www.letime.net/PianoBaul/'"></div></li>
      <li><div id="zone2"><input type="button" value="zone2" onclick="location.href='http://www.letime.net/PianoBaul/zone2/'"></div></li>
    </ul>

  </li><li>Telechargement
    <ul>

      <li><div id="generateur"><input type="button" value="generateur" onclick="location.href='http://www.letime.net/PianoBaul/src.tar.gz'"></div></li>
      <li><div id="cours"><input type="button" value="cours" onclick="location.href='http://letime.net/cours/'" ></div></li>
      <li><div id="wiki"><input type="button" value="wiki" onclick="location.href='http://debian-facile.org/projets:sequenbaul'" ></div></li>
    </ul>
  </li>
</ul>

</div>

</header> 

<!-- en attente PianoBaul   -->

<div><audio id="1awav" src="http://www.letime.net/PianoBaul/zone3/g1/a2.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/zone3/g1/a3.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/zone3/g1/a4.wav" preload></audio></div>
<div><audio id="1dwav" src="http://www.letime.net/PianoBaul/zone3/g1/a5.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/zone3/g1/z2.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/zone3/g1/z3.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/zone3/g1/z4.wav" preload></audio></div>
<div><audio id="2dwav" src="http://www.letime.net/PianoBaul/zone3/g1/z5.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/zone3/g1/e2.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/zone3/g1/e3.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/zone3/g1/e4.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/zone3/g1/r2.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/zone3/g1/r3.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/zone3/g1/r4.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/zone3/g1/t2.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/zone3/g1/t3.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/zone3/g1/t4.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/zone3/g1/y2.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/zone3/g1/y3.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/zone3/g1/y4.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/zone3/g1/u2.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/zone3/g1/u3.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/zone3/g1/u4.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/zone3/g1/i2.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/zone3/g1/i3.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/zone3/g1/i4.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/zone3/g1/o2.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/zone3/g1/o3.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/zone3/g1/o4.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/zone3/g1/p2.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/zone3/g1/p3.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/zone3/g1/p4.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/zone3/g1/q2.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/zone3/g1/q3.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/zone3/g1/q4.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/zone3/g1/s2.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/zone3/g1/s3.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/zone3/g1/s4.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/zone3/g1/d2.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/zone3/g1/d3.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/zone3/g1/d4.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/zone3/g1/f2.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/zone3/g1/f3.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/zone3/g1/f4.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/zone3/g1/g2.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/zone3/g1/g3.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/zone3/g1/g4.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/zone3/g1/h2.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/zone3/g1/h3.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/zone3/g1/h4.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/zone3/g1/j2.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/zone3/g1/j3.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/zone3/g1/j4.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/zone3/g1/k2.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/zone3/g1/k3.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/zone3/g1/k4.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/zone3/g1/l2.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/zone3/g1/l3.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/zone3/g1/l4.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/zone3/g1/m2.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/zone3/g1/m3.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/zone3/g1/m4.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/zone3/g1/w2.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/zone3/g1/w3.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/zone3/g1/w4.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/zone3/g1/x2.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/zone3/g1/x3.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/zone3/g1/x4.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/zone3/g1/c2.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/zone3/g1/c3.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/zone3/g1/c4.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/zone3/g1/v2.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/zone3/g1/v3.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/zone3/g1/v4.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/zone3/g1/b2.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/zone3/g1/b3.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/zone3/g1/b4.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/zone3/g1/n2.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/zone3/g1/n3.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/zone3/g1/n4.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/zone3/g1/02.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/zone3/g1/03.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/zone3/g1/04.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/zone3/g1/12.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/zone3/g1/13.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/zone3/g1/14.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/zone3/g1/22.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/zone3/g1/23.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/zone3/g1/24.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/zone3/g1/32.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/zone3/g1/33.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/zone3/g1/34.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/zone3/g1/42.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/zone3/g1/43.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/zone3/g1/44.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/zone3/g1/52.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/zone3/g1/53.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/zone3/g1/54.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/zone3/g1/62.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/zone3/g1/63.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/zone3/g1/64.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/zone3/g1/72.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/zone3/g1/73.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/zone3/g1/74.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/zone3/g1/82.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/zone3/g1/83.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/zone3/g1/84.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/zone3/g1/92.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/zone3/g1/93.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/zone3/g1/94.wav" preload></audio></div>






<div class="corde1"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte1Press();" onMouseUp="gratteUp();"><audio id="1wav" src="http://www.letime.net/PianoBaul/zone3/g1/a1.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte2Press();" onMouseUp="gratteUp();"><audio id="2wav" src="http://www.letime.net/PianoBaul/zone3/g1/z1.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte3Press();" onMouseUp="gratteUp();"><audio id="3wav" src="http://www.letime.net/PianoBaul/zone3/g1/e1.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte4Press();" onMouseUp="gratteUp();"><audio id="4wav" src="http://www.letime.net/PianoBaul/zone3/g1/r1.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte5Press();" onMouseUp="gratteUp();"><audio id="5wav" src="http://www.letime.net/PianoBaul/zone3/g1/t1.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte6Press();" onMouseUp="gratteUp();"><audio id="6wav" src="http://www.letime.net/PianoBaul/zone3/g1/y1.wav" preload></audio></div>

</div>


<div class="corde2"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte7Press();" onMouseUp="gratteUp();"><audio id="7wav" src="http://www.letime.net/PianoBaul/zone3/g1/u1.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte8Press();" onMouseUp="gratteUp();"><audio id="8wav" src="http://www.letime.net/PianoBaul/zone3/g1/i1.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte9Press();" onMouseUp="gratteUp();"><audio id="9wav" src="http://www.letime.net/PianoBaul/zone3/g1/o1.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte10Press();" onMouseUp="gratteUp();"><audio id="10wav" src="http://www.letime.net/PianoBaul/zone3/g1/p1.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte11Press();" onMouseUp="gratteUp();"><audio id="11wav" src="http://www.letime.net/PianoBaul/zone3/g1/q1.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte12Press();" onMouseUp="gratteUp();"><audio id="12wav" src="http://www.letime.net/PianoBaul/zone3/g1/s1.wav" preload></audio></div>

</div>



<div class="corde3"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte13Press();" onMouseUp="gratteUp();"><audio id="13wav" src="http://www.letime.net/PianoBaul/zone3/g1/d1.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte14Press();" onMouseUp="gratteUp();"><audio id="14wav" src="http://www.letime.net/PianoBaul/zone3/g1/f1.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte15Press();" onMouseUp="gratteUp();"><audio id="15wav" src="http://www.letime.net/PianoBaul/zone3/g1/g1.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte16Press();" onMouseUp="gratteUp();"><audio id="16wav" src="http://www.letime.net/PianoBaul/zone3/g1/h1.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte17Press();" onMouseUp="gratteUp();"><audio id="17wav" src="http://www.letime.net/PianoBaul/zone3/g1/j1.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte18Press();" onMouseUp="gratteUp();"><audio id="18wav" src="http://www.letime.net/PianoBaul/zone3/g1/k1.wav" preload></audio></div>
</div>

<div class="corde4"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte19Press();" onMouseUp="gratteUp();"><audio id="19wav" src="http://www.letime.net/PianoBaul/zone3/g1/l1.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte20Press();" onMouseUp="gratteUp();"><audio id="20wav" src="http://www.letime.net/PianoBaul/zone3/g1/m1.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte21Press();" onMouseUp="gratteUp();"><audio id="21wav" src="http://www.letime.net/PianoBaul/zone3/g1/w1.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte22Press();" onMouseUp="gratteUp();"><audio id="22wav" src="http://www.letime.net/PianoBaul/zone3/g1/x1.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte23Press();" onMouseUp="gratteUp();"><audio id="23wav" src="http://www.letime.net/PianoBaul/zone3/g1/c1.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte24Press();" onMouseUp="gratteUp();"><audio id="24wav" src="http://www.letime.net/PianoBaul/zone3/g1/v1.wav" preload></audio></div>
</div>

<div class="corde5"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte25Press();" onMouseUp="gratteUp();"><audio id="25wav" src="http://www.letime.net/PianoBaul/zone3/g1/b1.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte26Press();" onMouseUp="gratteUp();"><audio id="26wav" src="http://www.letime.net/PianoBaul/zone3/g1/n1.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte27Press();" onMouseUp="gratteUp();"><audio id="27wav" src="http://www.letime.net/PianoBaul/zone3/g1/01.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte28Press();" onMouseUp="gratteUp();"><audio id="28wav" src="http://www.letime.net/PianoBaul/zone3/g1/11.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte29Press();" onMouseUp="gratteUp();"><audio id="29wav" src="http://www.letime.net/PianoBaul/zone3/g1/21.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte30Press();" onMouseUp="gratteUp();"><audio id="30wav" src="http://www.letime.net/PianoBaul/zone3/g1/31.wav" preload></audio></div>
</div>

<div class="corde6"> 
<!-- gratte1 --> 

<div class="gratte1" onMouseDown="gratte31Press();" onMouseUp="gratteUp();"><audio id="31wav" src="http://www.letime.net/PianoBaul/zone3/g1/41.wav" preload></audio></div>

<!-- gratte2 --> 
<div class="gratte2" onMouseDown="gratte32Press();" onMouseUp="gratteUp();"><audio id="32wav" src="http://www.letime.net/PianoBaul/zone3/g1/51.wav" preload></audio></div>


<!-- gratte3 --> 

<div class="gratte3" onMouseDown="gratte33Press();" onMouseUp="gratteUp();"><audio id="33wav" src="http://www.letime.net/PianoBaul/zone3/g1/61.wav" preload></audio></div>

<!-- gratte4 --> 
<div class="gratte4" onMouseDown="gratte34Press();" onMouseUp="gratteUp();"><audio id="34wav" src="http://www.letime.net/PianoBaul/zone3/g1/71.wav" preload></audio></div>

<!-- gratte5 --> 

<div class="gratte5" onMouseDown="gratte35Press();" onMouseUp="gratteUp();"><audio id="35wav" src="http://www.letime.net/PianoBaul/zone3/g1/81.wav" preload></audio></div>

<!-- gratte6 --> 
<div class="gratte6" onMouseDown="gratte36Press();" onMouseUp="gratteUp();"><audio id="36wav" src="http://www.letime.net/PianoBaul/zone3/g1/91.wav" preload></audio></div>
</div>



<!-- fin corde6 --> 
</body>

</html> 

Cordialement

Dernière modification par temps (Le 11/07/2015, à 02:22)


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

#13 Le 07/07/2015, à 08:53

telliam

Re : menu css3

tu te parles a toi meme?


"- Un intellectuel assis va moins loin qu'un con qui marche."
Maurice Biraud - Un Taxi pour Tobrouk
Michel Audiard

Hors ligne

#14 Le 14/07/2015, à 15:59

temps

Re : menu css3

Bonjour,
Merci telliam de te faire du soucis concernant les posts.
Je travail actuellement sur 2 projets liés, et ma démarche est de partager des propositions de codes.
Si un seul lecteur, trouve une idée d'approche utile, je suis content.
Comme le fil a dépassé les 10 lectures, je pense qu'il y a un intérêt suffisant pour être continué.
Coté audio, je continue à poser des bases pour que les tux ait des graphismes d'instruments de musique,
Coté film inter-actif, j'ai plusieurs solutions dans le tirroir, mon problème actuelle est de comment les ranger pour bien les présenter.
Il est certain que comme dab, j'aurai préféré une réponse sur le sujet, sur le fond, et non pas sur la forme. Mais je crois bien que ce n'est pas la première fois qu'on se croise, et je rappelle que la forme ne m’intéresse pas car j'ai pas le temps, j'ai trop à faire sur le fond

Voici un premier jet de base du violon.
Je place en premier deux ronds, ensuite j'utilise le fait qu"en css3, c'est le dernier qui parle qui a raison, pour faire les contours avec 2 autres ronds. Je place le manche.
Je dois encore ajouter tous les petits éléments et le mouvement de l'archet au clique des notes.

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PianoBaul HTML5 violon 1</title>


<style>

#mentonniere {
	position:fixed;
    width: 30%;
    height: 80%;
    background: #FF9900;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:5%;
	margin-left:2%;

}

#table {
	position:relative;
    width: 120%;
    height: 80%;
    background: #FF9900;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:25%;
	margin-left:60%;

}

#coinshaut {
	position:fixed;
    width: 15%;
    height: 25%;
    background: white;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:1%;
	margin-left:20%;

}

#coinsbas {
	position:fixed;
    width: 15%;
    height: 25%;
    background: white;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:52%;
	margin-left:20%;

}

#lemanche {
    content: "";  
	position:fixed;
    border-radius: 25px;
    background: #FF9900;
    padding: 20px;
    width: 40%;
    height: 5%;
	margin-top:33%;
	margin-left:50%;
}

#cheville1 {
    content: "";  
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:32%;
	margin-left:90%;
}
#cheville2 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:39%;
	margin-left:89%;
}
#cheville3 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:32%;
	margin-left:88%;
}
#cheville4 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:39%;
	margin-left:87%;
}
#corde1 {

	position:fixed;
    background: #B8E6E6;
    width: 76%;
    height: 1%;
	margin-top:34%;
	margin-left:12%;
}
#corde2 {

	position:fixed;
    background: #B8E6E6;
    width: 78%;
    height: 1%;
	margin-top:35.5%;
	margin-left:12%;
}
#corde3 {

	position:fixed;
    background: #B8E6E6;
    width: 77%;
    height: 1%;
	margin-top:37%;
	margin-left:12%;
}
#corde4 {

	position:fixed;
    background: #B8E6E6;
    width: 75%;
    height: 1%;
	margin-top:38.5%;
	margin-left:12%;
}

#cordier {
	position:fixed;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #CC3300;
    border-bottom: 50px solid transparent;
	margin-top:32.5%;
	margin-left:5%;
}


}
</style>


</head>

<body>




<div id="mentonniere">
<div id="table">
</div>
</div>
</div>
<div id="coinshaut">
</div>
<div id="coinsbas">
</div>
<div id="lemanche">
</div>
<div id="cheville1">
</div>
<div id="cheville2">
</div>
<div id="cheville3">
</div>
<div id="cheville4">
</div>
<div id="corde1">
</div>
<div id="corde2">
</div>
<div id="corde3">
</div>
<div id="corde4">
</div>
<div id="cordier">
</div>
</body>

</html> 

Et voici un premier jet de graphisme de guitare sèche que je garderait pour placer les différentes formes de sons possibles avec une guitare

<!DOCTYPE html>
<html>

<head>
<title>PianoBaul HTML5 zone 3 guitare seche 1</title>

<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/zone3/j1/x/" />

<meta name="description" content="Piano virtuel zone 3 guitare seche application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />

<script type="text/javascript">


if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/zone3/j1/x/";
}

    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;
    	 var mua27 = 0;
    	 var mua28 = 0;
    	 var mua29 = 0;
    	 var mua30 = 0;
    	 var mua31 = 0;
    	 var mua32 = 0;
    	 var mua33 = 0;
    	 var mua34 = 0;
    	 var mua35 = 0;
    	 var mua36 = 0;

	var lelogo = 0;
   	 

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;
   	
    	case "0":
    	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
   	break;
   	
    	case "1":
    	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
   	break;
   	
    	case "2":
    	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
   	break;
   	
    	case "3":
    	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
   	break;
   	
    	case "4":
    	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
   	break;
   	
    	case "5":
    	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
   	break;
   	
    	case "6":
    	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
   	break;
   	
    	case "7":
    	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
   	break;
   	
    	case "8":
    	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
   	break;
   	
    	case "9":
    	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
   	break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



  
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("34wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("34awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("34bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("34cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }



function action1Press(){
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function action2Press(){
	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
  }
function action3Press(){
	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
  }  
function action4Press(){
	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
  }
function action5Press(){
	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
  }
function action6Press(){
	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchey(mua6);
  }
function action7Press(){
	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
  }
function action8Press(){
	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
  }
function action9Press(){
	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
  }
function action10Press(){
	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
  }
function action11Press(){
	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
  }
function action12Press(){
	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
  }
function action13Press(){
	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
  }
function action14Press(){
	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
  }
function action15Press(){
	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
  } 
function action16Press(){
	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
  }
function action17Press(){
	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
  }
function action18Press(){
	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
  }  
function action19Press(){
	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
  }
function action20Press(){
	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
  }
function action21Press(){
	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
  }
function action22Press(){
	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
  }
function action23Press(){
	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouched(mua23);
  }
function action24Press(){
	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
  }
function action25Press(){
	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
  }
function action26Press(){
	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
  }
function action27Press(){
	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
  }
function action28Press(){
	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
  }
function action29Press(){
	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
  }
function action30Press(){
	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
  }
function action31Press(){
	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
  }
function action32Press(){
	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
  }
function action33Press(){
	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
  }
function action34Press(){
	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
  }
function action35Press(){
	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
  } 
function action36Press(){
	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
  }  

function pourlogo(){

	lelogo = lelogo + 1;
	if(lelogo>6){
        lelogo =0;
  	}
	multitouchelogo(lelogo);
  }
      


  function multitouchelogo(lelogo){

  if(lelogo==0){

  document.getElementById('montre').className = 'le2';
  }
  else if(lelogo==1){

  document.getElementById('montre').className = 'le3';
  }
  else if(lelogo==2){

  document.getElementById('montre').className = 'le4';
  }
  else if(lelogo==3){

  document.getElementById('montre').className = 'le5';
  }
  else if(lelogo==4){

  document.getElementById('montre').className = 'le6';
  }
  else if(lelogo==5){

  document.getElementById('montre').className = 'le7';
  }
  else if(lelogo==6){

  document.getElementById('montre').className = 'le8';
  }
  }


     
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
   
    </script>  

<style>

#mentonniere {
	position:fixed;
    width: 30%;
    height: 80%;
    background: #FF9900;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:5%;
	margin-left:2%;

}

#table {
	position:relative;
    width: 120%;
    height: 80%;
    background: #FF9900;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:25%;
	margin-left:60%;

}

#lemanche {
    content: "";  
	position:fixed;
    border-radius: 25px;
    background: #990000;
    padding: 20px;
    width: 40%;
    height: 9%;
	margin-top:33%;
	margin-left:50%;
}


#rosace {
	position:fixed;
    width: 10%;
    height: 15%;
    background: black;
    -moz-border-radius: 50% / 50%;
    -webkit-border-radius: 50% / 50%;
    border-radius: 50% / 50%;
	margin-top:33%;
	margin-left:30%;

}


#clef1 {
    content: "";  
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:31%;
	margin-left:90%;
}
#clef2 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:43%;
	margin-left:90%;
}
#clef3 {
    content: "";  
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:31%;
	margin-left:88.5%;
}
#clef4 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:43%;
	margin-left:88.5%;
}
#clef5 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:31%;
	margin-left:87%;
}
#clef6 {
	position:fixed;
    background: #FF9900;
    width: 0.7%;
    height: 3%;
	margin-top:43%;
	margin-left:87%;
}
#corde1 {

	position:fixed;
    background: #B8E6E6;
    width: 76%;
    height: 1%;
	margin-top:34%;
	margin-left:12%;
}
#corde2 {

	position:fixed;
    background: #B8E6E6;
    width: 77%;
    height: 1%;
	margin-top:35.5%;
	margin-left:12%;
}
#corde3 {

	position:fixed;
    background: #B8E6E6;
    width: 78.5%;
    height: 1%;
	margin-top:37%;
	margin-left:12%;
}
#corde4 {

	position:fixed;
    background: #B8E6E6;
    width: 78.5%;
    height: 1%;
	margin-top:38.5%;
	margin-left:12%;
}
#corde5 {

	position:fixed;
    background: #B8E6E6;
    width: 77%;
    height: 1%;
	margin-top:40%;
	margin-left:12%;
}
#corde6 {

	position:fixed;
    background: #B8E6E6;
    width: 76%;
    height: 1%;
	margin-top:41.5%;
	margin-left:12%;
}

#chevalet {
	position:fixed;
	width: 3%; 
	height: 15%;
	background: #CC3300;
	margin-top:32.5%;
	margin-left:9%;
}

#montre{
  position:fixed;
  width:150px;
  height:150px;
  margin-top:12%;
  margin-left:80%;

}



.le1
{
  background-image: none;
}

.le2
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo1.jpg);
}
.le3
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo2.jpg);
}
.le4
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo3.jpg);
}
.le5
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo5.jpg);
}
.le6
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo6.jpg);
}
.le7
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo7.jpg);
}
.le8
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo8.jpg);
}


img {
    display: none;
}

.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}  
   
 .placebas{
  position:fixed;

  margin-top:59%;
  color:#975401;

}  

.action{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:62%;
  background:blue;
  border-right:1px solid #BBB;
  cursor:pointer;

}



</style>


</head>

<body>

  <body>


<header> 

 <div id="choix"> 
<ul class="menu">
  <li>lois
    <ul>
      <li><div id="zone3"><input type="button" value="zone3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/'"></div></li>
	
    </ul>
  </li><li>a
    <ul>
      <li><div id="a1"><input type="button" value="a1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/a1/'"></div></li>

    </ul>
  </li><li>b
    <ul>
      <li><div id="b1"><input type="button" value="b1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/b1/'"></div></li>

    </ul>

  </li><li>c
    <ul>
      <li><div id="c1"><input type="button" value="c1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/c1/'"></div></li>

    </ul>

  </li><li>d
    <ul>
      <li><div id="d1"><input type="button" value="d1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d1/'"></div></li>
      <li><div id="d2"><input type="button" value="d2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d2/'"></div></li>

    </ul>
  </li><li>e
    <ul>
      <li><div id="e1"><input type="button" value="e1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/e1/'"></div></li>

    </ul>

  </li><li>f
    <ul>
      <li><div id="f1"><input type="button" value="f1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f1/'"></div></li>
      <li><div id="f2"><input type="button" value="f2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f2/'"></div></li>

    </ul>

  </li><li>g
    <ul>
      <li><div id="g1"><input type="button" value="g1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g1/'"></div></li>
      <li><div id="g2"><input type="button" value="g2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g2/'"></div></li>
      <li><div id="g3"><input type="button" value="g3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g3/'"></div></li>
      <li><div id="g4"><input type="button" value="g4" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g4/'"></div></li>

    </ul>
  </li><li>h
    <ul>
      <li><div id="h1"><input type="button" value="h1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h1/'"></div></li>
      <li><div id="h2"><input type="button" value="h2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h2/'"></div></li>

    </ul>
  </li><li>i
    <ul>
      <li><div id="i1"><input type="button" value="i1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/i1/'"></div></li>

    </ul>
  </li><li>i
    <ul>
      <li><div id="j1"><input type="button" value="j1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/j1/'"></div></li>

    </ul>
  </li><li>Zone
    <ul>
      <li><div id="Marteau"><input type="button" value="zone1" onclick="location.href='http://www.letime.net/PianoBaul/'"></div></li>
      <li><div id="zone2"><input type="button" value="zone2" onclick="location.href='http://www.letime.net/PianoBaul/zone2/'"></div></li>
    </ul>

  </li><li>Telechargement
    <ul>

      <li><div id="generateur"><input type="button" value="generateur" onclick="location.href='http://www.letime.net/PianoBaul/src.tar.gz'"></div></li>
      <li><div id="cours"><input type="button" value="cours" onclick="location.href='http://letime.net/cours/'" ></div></li>
      <li><div id="wiki"><input type="button" value="wiki" onclick="location.href='http://debian-facile.org/projets:sequenbaul'" ></div></li>
      <li><div id="montpellibre"><input type="button" value="montpellibre" onclick="location.href='http://letime.net/PianoBaul/montpellibre_kakemono.pdf'" ></div></li>
    </ul>
  </li>
</ul>

</div>

</header> 


      <div id="montre"></div>

<!-- en attente PianoBaul   -->

<div><audio id="1awav" src="http://www.letime.net/PianoBaul/zone3/j1/a2.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/zone3/j1/a3.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/zone3/j1/a4.wav" preload></audio></div>
<div><audio id="1dwav" src="http://www.letime.net/PianoBaul/zone3/j1/a5.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/zone3/j1/z2.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/zone3/j1/z3.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/zone3/j1/z4.wav" preload></audio></div>
<div><audio id="2dwav" src="http://www.letime.net/PianoBaul/zone3/j1/z5.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/zone3/j1/e2.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/zone3/j1/e3.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/zone3/j1/e4.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/zone3/j1/r2.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/zone3/j1/r3.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/zone3/j1/r4.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/zone3/j1/t2.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/zone3/j1/t3.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/zone3/j1/t4.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/zone3/j1/y2.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/zone3/j1/y3.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/zone3/j1/y4.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/zone3/j1/u2.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/zone3/j1/u3.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/zone3/j1/u4.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/zone3/j1/i2.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/zone3/j1/i3.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/zone3/j1/i4.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/zone3/j1/o2.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/zone3/j1/o3.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/zone3/j1/o4.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/zone3/j1/p2.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/zone3/j1/p3.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/zone3/j1/p4.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/zone3/j1/q2.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/zone3/j1/q3.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/zone3/j1/q4.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/zone3/j1/s2.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/zone3/j1/s3.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/zone3/j1/s4.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/zone3/j1/d2.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/zone3/j1/d3.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/zone3/j1/d4.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/zone3/j1/f2.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/zone3/j1/f3.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/zone3/j1/f4.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/zone3/j1/g2.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/zone3/j1/g3.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/zone3/j1/g4.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/zone3/j1/h2.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/zone3/j1/h3.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/zone3/j1/h4.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/zone3/j1/j2.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/zone3/j1/j3.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/zone3/j1/j4.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/zone3/j1/k2.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/zone3/j1/k3.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/zone3/j1/k4.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/zone3/j1/l2.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/zone3/j1/l3.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/zone3/j1/l4.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/zone3/j1/m2.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/zone3/j1/m3.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/zone3/j1/m4.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/zone3/j1/w2.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/zone3/j1/w3.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/zone3/j1/w4.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/zone3/j1/x2.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/zone3/j1/x3.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/zone3/j1/x4.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/zone3/j1/c2.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/zone3/j1/c3.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/zone3/j1/c4.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/zone3/j1/v2.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/zone3/j1/v3.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/zone3/j1/v4.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/zone3/j1/b2.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/zone3/j1/b3.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/zone3/j1/b4.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/zone3/j1/n2.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/zone3/j1/n3.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/zone3/j1/n4.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/zone3/j1/02.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/zone3/j1/03.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/zone3/j1/04.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/zone3/j1/12.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/zone3/j1/13.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/zone3/j1/14.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/zone3/j1/22.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/zone3/j1/23.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/zone3/j1/24.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/zone3/j1/32.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/zone3/j1/33.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/zone3/j1/34.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/zone3/j1/42.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/zone3/j1/43.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/zone3/j1/44.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/zone3/j1/52.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/zone3/j1/53.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/zone3/j1/54.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/zone3/j1/62.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/zone3/j1/63.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/zone3/j1/64.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/zone3/j1/72.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/zone3/j1/73.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/zone3/j1/74.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/zone3/j1/82.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/zone3/j1/83.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/zone3/j1/84.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/zone3/j1/92.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/zone3/j1/93.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/zone3/j1/94.wav" preload></audio></div>
<div><img id="logo1" src="http://www.letime.net/PianoBaul/montpellibre_logo1.jpg"  alt="logo1"></div>
<div><img id="logo2" src="http://www.letime.net/PianoBaul/montpellibre_logo2.jpg"  alt="logo2"></div>
<div><img id="logo3" src="http://www.letime.net/PianoBaul/montpellibre_logo3.jpg"  alt="logo3"></div>
<div><img id="logo4" src="http://www.letime.net/PianoBaul/montpellibre_logo5.jpg"  alt="logo4"></div>
<div><img id="logo5" src="http://www.letime.net/PianoBaul/montpellibre_logo6.jpg"  alt="logo5"></div>




<div id="mentonniere">
<div id="table">
</div>
</div>

<div id="lemanche">
</div>
<div id="rosace">
</div>
<div id="clef1">
</div>
<div id="clef2">
</div>
<div id="clef3">
</div>
<div id="clef4">
</div>
<div id="clef5">
</div>
<div id="clef6">
</div>
<div id="corde1">
</div>
<div id="corde2">
</div>
<div id="corde3">
</div>
<div id="corde4">
</div>
<div id="corde5">
</div>
<div id="corde6">
</div>
<div id="chevalet">
</div>






     
      <!-- DO gamme 1 -->
      <div class="action" onMouseDown="action1Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:1%;"><audio id="1wav" src="http://www.letime.net/PianoBaul/zone3/j1/a1.wav" preload></audio></div>


      <!-- DO+ gamme 1 -->
      <div class="action" onMouseDown="action2Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:3%;"><audio id="2wav" src="http://www.letime.net/PianoBaul/zone3/j1/z1.wav" preload></audio></div>


      <!-- RE gamme 1 -->
      <div class="action" onMouseDown="action3Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:5%;"><audio id="3wav" src="http://www.letime.net/PianoBaul/zone3/j1/e1.wav" preload></audio></div>

      <!-- RE+ gamme 1 -->
      <div class="action" onMouseDown="action4Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:7%;"><audio id="4wav" src="http://www.letime.net/PianoBaul/zone3/j1/r1.wav" preload></audio></div>



      <!-- MI gamme 1 -->
      <div class="action" onMouseDown="action5Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:9%;"><audio id="5wav" src="http://www.letime.net/PianoBaul/zone3/j1/t1.wav" preload></audio></div>




      <!-- FA gamme 1 -->
      <div class="action" onMouseDown="action6Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:11%;"><audio id="6wav" src="http://www.letime.net/PianoBaul/zone3/j1/y1.wav" preload></audio></div>



      <!-- FA+ gamme 1 -->
      <div class="action" onMouseDown="action7Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:13%;"><audio id="7wav" src="http://www.letime.net/PianoBaul/zone3/j1/u1.wav" preload></audio></div>




      <!-- SOL gamme 1 -->
      <div class="action" onMouseDown="action8Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:15%;"><audio id="8wav" src="http://www.letime.net/PianoBaul/zone3/j1/i1.wav" preload></audio></div>



      <!-- SOL+ gamme 1 -->
      <div class="action" onMouseDown="action9Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:17%;"><audio id="9wav" src="http://www.letime.net/PianoBaul/zone3/j1/o1.wav" preload></audio></div>





      <!-- LA gamme 1 -->
      <div class="action" onMouseDown="action10Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:21%;"><audio id="10wav" src="http://www.letime.net/PianoBaul/zone3/j1/p1.wav" preload></audio></div>




      <!-- LA+ gamme 1 -->
      <div class="action" onMouseDown="action11Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:23%;"><audio id="11wav" src="http://www.letime.net/PianoBaul/zone3/j1/q1.wav" preload></audio></div>




      <!-- SI gamme 1 -->
      <div class="action"  onMouseDown="action12Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:25%;"><audio id="12wav" src="http://www.letime.net/PianoBaul/zone3/j1/s1.wav" preload></audio></div>




      <!-- DO gamme 2 -->
      <div class="action" onMouseDown="action13Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:27%;"><audio id="13wav" src="http://www.letime.net/PianoBaul/zone3/j1/d1.wav" preload></audio></div>



      <!-- DO+ gamme 2 -->
      <div class="action" onMouseDown="action14Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:29%;"><audio id="14wav" src="http://www.letime.net/PianoBaul/zone3/j1/f1.wav" preload></audio></div>



      <!-- RE gamme 2 -->
      <div class="action" onMouseDown="action15Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:31%;"><audio id="15wav" src="http://www.letime.net/PianoBaul/zone3/j1/g1.wav" preload></audio></div>




      <!-- RE+ gamme 2 -->
      <div class="action" onMouseDown="action16Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:33%;"><audio id="16wav" src="http://www.letime.net/PianoBaul/zone3/j1/h1.wav" preload></audio></div>




      <!-- MI gamme 2 -->
      <div class="action" onMouseDown="action17Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:35%;"><audio id="17wav" src="http://www.letime.net/PianoBaul/zone3/j1/j1.wav" preload></audio></div>




      <!-- FA gamme 2 -->
      <div class="action" onMouseDown="action18Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:37%;"><audio id="18wav" src="http://www.letime.net/PianoBaul/zone3/j1/k1.wav" preload></audio></div>




      <!-- FA+ gamme 2 -->
      <div class="action" onMouseDown="action19Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:39%;"><audio id="19wav" src="http://www.letime.net/PianoBaul/zone3/j1/k1.wav" preload></audio></div>




      <!-- SOL gamme 2 -->
      <div class="action" onMouseDown="action20Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:41%;"><audio id="20wav" src="http://www.letime.net/PianoBaul/zone3/j1/m1.wav" preload></audio></div>



      <!-- SOL+ gamme 2 -->
      <div class="action" onMouseDown="action21Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:43%;"><audio id="21wav" src="http://www.letime.net/PianoBaul/zone3/j1/w1.wav" preload></audio></div>




      <!-- LA gamme 2 -->
      <div class="action" onMouseDown="action22Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:45%;"><audio id="22wav" src="http://www.letime.net/PianoBaul/zone3/j1/x1.wav" preload></audio></div>

      <!-- LA+ gamme 2 -->
      <div class="action" onMouseDown="action23Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:47%;"><audio id="23wav" src="http://www.letime.net/PianoBaul/zone3/j1/c1.wav" preload></audio></div>



      <!-- SI gamme 2 -->
      <div class="action" onMouseDown="action24Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:49%;"><audio id="24wav" src="http://www.letime.net/PianoBaul/zone3/j1/v1.wav" preload></audio></div>




      <!-- DO gamme 3 -->
      <div class="action" onMouseDown="action25Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:51%;"><audio id="25wav" src="http://www.letime.net/PianoBaul/zone3/j1/b1.wav" preload></audio></div>

      <!-- DO+ gamme 3 -->
      <div class="action" onMouseDown="action26Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:53%;"><audio id="26wav" src="http://www.letime.net/PianoBaul/zone3/j1/n1.wav" preload></audio></div>



      <!-- RE gamme 3 -->
      <div class="action" onMouseDown="action27Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:55%;"><audio id="27wav" src="http://www.letime.net/PianoBaul/zone3/j1/01.wav" preload></audio></div>

      <!-- RE+ gamme 3 -->
      <div class="action" onMouseDown="action28Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:57%;"><audio id="28wav" src="http://www.letime.net/PianoBaul/zone3/j1/11.wav" preload></audio></div>


      <!-- MI gamme 3 -->
      <div class="action" onMouseDown="action29Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:59%;"><audio id="29wav" src="http://www.letime.net/PianoBaul/zone3/j1/21.wav" preload></audio></div>



      <!-- FA gamme 3 -->
      <div class="action" onMouseDown="action30Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:61%;"><audio id="30wav" src="http://www.letime.net/PianoBaul/zone3/j1/31.wav" preload></audio></div>

      <!-- FA+ gamme 3 -->
      <div class="action" onMouseDown="action31Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:63%;"><audio id="31wav" src="http://www.letime.net/PianoBaul/zone3/j1/41.wav" preload></audio></div>



      <!-- SOL gamme 3 -->
      <div class="action" onMouseDown="action32Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:65%;"><audio id="32wav" src="http://www.letime.net/PianoBaul/zone3/j1/51.wav" preload></audio></div>

      <!-- SOL+ gamme 3 -->
      <div class="action" onMouseDown="action33Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:67.15%;"><audio id="33wav" src="http://www.letime.net/PianoBaul/zone3/j1/61.wav" preload></audio></div>

      <!-- LA gamme 3 -->
      <div class="action" onMouseDown="action34Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:69%;"><audio id="34wav" src="http://www.letime.net/PianoBaul/zone3/j1/71.wav" preload></audio></div>

      <!-- LA+ gamme 3 -->
      <div class="action" onMouseDown="action35Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:71%;"><audio id="35wav" src="http://www.letime.net/PianoBaul/zone3/j1/81.wav" preload></audio></div>


      <!-- SI gamme 3 -->
      <div class="action" onMouseDown="action36Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:73%;"><audio id="36wav" src="http://www.letime.net/PianoBaul/zone3/j1/91.wav" preload></audio></div> 
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     




















</body>

</html> 

Pour l'harmonica, il y en a plusieurs. L'idée est de donner une perspective à un rectangle, puis d'utiliser les trous et le corps de l'harmonica comme repère pour jouer les notes (soufflées et aspirées). Ce qui donne un truc du style :

<!DOCTYPE html>
<html>

<head>
<title>PianoBaul HTML5 zone 3 harmonica diatonique simple 1</title>

<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/zone3/k1/x/" />

<meta name="description" content="Piano virtuel zone 3 harmonica diatonique simple 1 application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />

<style> 
.bordure{
	position: fixed;
	margin-top:43.7%;
	margin-left:15%;
  -webkit-transform: skewY(60deg);
  -moz-transform: skewY(60deg);
  background-color: red;
  width:5%;
  height:30%
}
.face {
	position: fixed;
	margin-top:30.8%;
	margin-left:20%;
  -webkit-transform: skewY(-30deg);
  -moz-transform: skewY(-30deg);
  background-color: blue;
  width: 59.5%;
  height: 30%
}
.dessus {
	position: fixed;
	margin-left:41.9%;
	margin-top:-8.05%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: green;
  width:10.65%;
  height:90%

}
.trou1 {
	position: fixed;
	margin-left:21%;
	margin-top:37%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou2 {
	position: fixed;
	margin-left:26%;
	margin-top:34.15%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou3 {
	position: fixed;
	margin-left:31%;
	margin-top:31.3%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou4 {
	position: fixed;
	margin-left:36%;
	margin-top:28.45%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou5 {
	position: fixed;
	margin-left:41%;
	margin-top:25.6%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou6 {
	position: fixed;
	margin-left:46%;
	margin-top:22.75%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou7 {
	position: fixed;
	margin-left:51%;
	margin-top:19.9%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou8 {
	position: fixed;
	margin-left:56%;
	margin-top:17.05%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou9 {
	position: fixed;
	margin-left:61%;
	margin-top:14.2%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}
.trou10 {
	position: fixed;
	margin-left:66%;
	margin-top:11.35%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  background-color: black;
  width:8.65%;
  height:5%
}

</style>
</head>
<body>

  <div class="bordure">
PianoBaul
  </div>




  <div class="face">
cases
  </div>
  <div class="dessus">
    </div>

  <div class="trou1">
    </div>
  <div class="trou2">
    </div>
  <div class="trou3">
    </div>
  <div class="trou4">
    </div>
  <div class="trou5">
    </div>
  <div class="trou6">
    </div>
  <div class="trou7">
    </div>
  <div class="trou8">
    </div>
  <div class="trou9">
    </div>
  <div class="trou10">
    </div>
</body>
</html>

Base pour le guitare électrique

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>guitare electrique</title>

<style>

.centre{
margin-top : 10%;
margin-left : 2%;
}

#table1 {
  position: absolute;
   display:block;
   width: 560px;
   height: 560px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 72px 108px 108px 72px;
   border-radius:        50%   90%  90%  50%  /  60%  80% 80%   60%  ;

}

#table2 {
  position: absolute;
top:5px;
margin-left : 300px;
   display:block;
   width: 360px;
   height: 540px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 72px 108px 108px 72px;
   border-radius:        90%   50%  50%  90%  /  80%  60% 80%   60%  ;
}

#decoupe1 {
  position: absolute;
top:20px;
margin-left : 220px;
    width: 400px;
    height: 200px;
    background: white;
    -moz-border-radius: 200px / 100px;
    -webkit-border-radius: 200px / 100px;
    border-radius: 200px / 100px;
}
#decoupe2 {
  position: absolute;
top:310px;
margin-left : 120px;
    width: 400px;
    height: 224px;
    background: white;
    -moz-border-radius: 200px / 100px;
    -webkit-border-radius: 200px / 100px;
    border-radius: 200px / 100px;
}

#lemanche {
    content: "";  
  position: absolute;
top:212px;
    border-radius: 25px 55px 25px 25px/25px 90px 25px 25px;
    background: #990000;

    width: 600px;
    height: 100px;

	margin-left:50%;
}
#corde1 {

	position:absolute;
    background: #B8E6E6;
    width: 870px;
    height: 10px;
	top:4px;
	left:-320px;
}
#corde2 {

	position:absolute;
    background: #B8E6E6;
    width: 876px;
    height: 10px;
	top:19px;
	left:-320px;
}
#corde3 {
	position:absolute;
    background: #B8E6E6;
    width: 882px;
    height: 10px;
	top:34px;
	left:-320px;
}
#corde4 {

	position:absolute;
    background: #B8E6E6;
    width: 888px;
    height: 10px;
	top:49px;
	left:-320px;
}
#corde5 {

	position:absolute;
    background: #B8E6E6;
    width: 894px;
    height: 10px;
	top:64px;
	left:-320px;
}
#corde6 {

	position:absolute;
    background: #B8E6E6;
    width: 900px;
    height: 10px;
	top:79px;
	left:-320px;
}

#attachecordes {

	position:absolute;
    background: #B8E6E6;
    width: 30px;
    height: 100px;
	left:-320px;
}

</style>

</head>

<body>
<div class="centre">
 <div id="table1">
  <div id="table2"> 
   <div id="decoupe1"> </div>
   <div id="decoupe2"> </div>
   <div id="lemanche"> 
	   <div id="corde1"> </div>
	   <div id="corde2"> </div>
	   <div id="corde3"> </div>
	   <div id="corde4"> </div>
	   <div id="corde5"> </div>
	   <div id="corde6"> </div>
	   <div id="attachecordes"> </div>
   </div>
  </div>
 </div>
</div>
</body>

</html> 

Cordialement

Dernière modification par temps (Le 19/07/2015, à 14:32)


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

#15 Le 24/07/2015, à 20:28

temps

Re : menu css3

Bonjour,
j'avance sur le projet, j'ai plus d'une dizaine d'instruments de musique en css, j'ai ajouté les vibrations des cordes sur les instruments à corde, je suis en contacte avec des musiciens pour la localisation des pincées pour produire les différentes notes en fonction de l'endroit ou on clique sur la corde.
Je viens d'ajouter ce soir une première ébauche de Bombarde, il faut encore que je décide ce que je vais mettre en mouvement.
Voici le code :

<!DOCTYPE html>
<html>

<head>
<title>Bombarde PianoBaul HTML5 zone 3</title>

<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/zone3/r1/x/" />

<meta name="description" content="Bombarde virtuel zone 3 application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />

<script type="text/javascript">


if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/zone3/r1/x/";
}

    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;
    	 var mua27 = 0;
    	 var mua28 = 0;
    	 var mua29 = 0;
    	 var mua30 = 0;
    	 var mua31 = 0;
    	 var mua32 = 0;
    	 var mua33 = 0;
    	 var mua34 = 0;
    	 var mua35 = 0;
    	 var mua36 = 0;

	var lelogo = 0;
   	 

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>5){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>5){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>5){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>5){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>5){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>5){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>5){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>5){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>5){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>5){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;
   	
    	case "0":
    	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
   	break;
   	
    	case "1":
    	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
   	break;
   	
    	case "2":
    	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
   	break;
   	
    	case "3":
    	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
   	break;
   	
    	case "4":
    	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
   	break;
   	
    	case "5":
    	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
   	break;
   	
    	case "6":
    	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
   	break;
   	
    	case "7":
    	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
   	break;
   	
    	case "8":
    	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
   	break;
   	
    	case "9":
    	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
   	break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



  
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  else if(mua1==4){

  var multia5 = document.getElementById("1dwav");
  multia5.play();
  }
  else if(mua1==5){

  var multia6 = document.getElementById("1ewav");
  multia6.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  else if(mua2==4){

  var multiz5 = document.getElementById("2dwav");
  multiz5.play();
  }
  else if(mua2==5){

  var multiz6 = document.getElementById("2ewav");
  multiz6.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  else if(mua3==4){

  var multie5 = document.getElementById("3dwav");
  multie5.play();
  }
  else if(mua3==5){

  var multie6 = document.getElementById("3ewav");
  multie6.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  else if(mua4==4){

  var multir5 = document.getElementById("4dwav");
  multir5.play();
  }
  else if(mua4==5){

  var multir6 = document.getElementById("4ewav");
  multir6.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  else if(mua5==4){

  var multit5 = document.getElementById("5dwav");
  multit5.play();
  }
  else if(mua5==5){

  var multit6 = document.getElementById("5ewav");
  multit6.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  else if(mua6==4){

  var multiy5 = document.getElementById("6dwav");
  multiy5.play();
  }
  else if(mua6==5){

  var multiy6 = document.getElementById("6ewav");
  multiy6.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  else if(mua7==4){

  var multiu5 = document.getElementById("7dwav");
  multiu5.play();
  }
  else if(mua7==5){

  var multiu6 = document.getElementById("7ewav");
  multiu6.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  else if(mua8==4){

  var multii5 = document.getElementById("8dwav");
  multii5.play();
  }
  else if(mua8==5){

  var multii6 = document.getElementById("8ewav");
  multii6.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  else if(mua9==4){

  var multio5 = document.getElementById("9dwav");
  multio5.play();
  }
  else if(mua9==5){

  var multio6 = document.getElementById("9ewav");
  multio6.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  else if(mua10==4){

  var multip5 = document.getElementById("10dwav");
  multip5.play();
  }
  else if(mua10==5){

  var multip6 = document.getElementById("10ewav");
  multip6.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("34wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("34awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("34bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("34cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }



function action1Press(){
	mua1 = mua1 + 1;
	if(mua1>5){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function action2Press(){
	mua2 = mua2 + 1;
	if(mua2>5){
        mua2 =0;
  	}
	multitouchez(mua2);
  }
function action3Press(){
	mua3 = mua3 + 1;
	if(mua3>5){
        mua3 =0;
  	}
	multitouchee(mua3);
  }  
function action4Press(){
	mua4 = mua4 + 1;
	if(mua4>5){
        mua4 =0;
  	}
	multitoucher(mua4);
  }
function action5Press(){
	mua5 = mua5 + 1;
	if(mua5>5){
        mua5 =0;
  	}
	multitouchet(mua5);
  }
function action6Press(){
	mua6 = mua6 + 1;
	if(mua6>5){
        mua6 =0;
  	}
	multitouchey(mua6);
  }
function action7Press(){
	mua7 = mua7 + 1;
	if(mua7>5){
        mua7 =0;
  	}
	multitoucheu(mua7);
  }
function action8Press(){
	mua8 = mua8 + 1;
	if(mua8>5){
        mua8 =0;
  	}
	multitouchei(mua8);
  }
function action9Press(){
	mua9 = mua9 + 1;
	if(mua9>5){
        mua9 =0;
  	}
	multitoucheo(mua9);
  }
function action10Press(){
	mua10 = mua10 + 1;
	if(mua10>5){
        mua10 =0;
  	}
	multitouchep(mua10);
  }
function action11Press(){
	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
  }
function action12Press(){
	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
  }
function action13Press(){
	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
  }
function action14Press(){
	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
  }
function action15Press(){
	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
  } 
function action16Press(){
	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
  }
function action17Press(){
	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
  }
function action18Press(){
	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
  }  
function action19Press(){
	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
  }
function action20Press(){
	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
  }
function action21Press(){
	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
  }
function action22Press(){
	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
  }
function action23Press(){
	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouched(mua23);
  }
function action24Press(){
	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
  }
function action25Press(){
	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
  }
function action26Press(){
	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
  }
function action27Press(){
	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
  }
function action28Press(){
	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
  }
function action29Press(){
	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
  }
function action30Press(){
	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
  }
function action31Press(){
	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
  }
function action32Press(){
	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
  }
function action33Press(){
	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
  }
function action34Press(){
	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
  }
function action35Press(){
	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
  } 
function action36Press(){
	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
  }  

function pourlogo(){

	lelogo = lelogo + 1;
	if(lelogo>6){
        lelogo =0;
  	}
	multitouchelogo(lelogo);
  }
      


  function multitouchelogo(lelogo){

  if(lelogo==0){

  document.getElementById('montre').className = 'le2';
  }
  else if(lelogo==1){

  document.getElementById('montre').className = 'le3';
  }
  else if(lelogo==2){

  document.getElementById('montre').className = 'le4';
  }
  else if(lelogo==3){

  document.getElementById('montre').className = 'le5';
  }
  else if(lelogo==4){

  document.getElementById('montre').className = 'le6';
  }
  else if(lelogo==5){

  document.getElementById('montre').className = 'le7';
  }
  else if(lelogo==6){

  document.getElementById('montre').className = 'le8';
  }
  }


     
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
   
    </script>  

<style>

.centre{
margin-top : 10%;
margin-left : 5%;
}


#bombarde {
	position:absolute;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 700px solid #996633;
    border-bottom: 50px solid transparent;
}


.bec {
	position:absolute;
    border-bottom: 20px solid #996633;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 20px;
top:-10px;
}
.partie1 {
	position:absolute;
    border-bottom: 20px solid #996633;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 20px;
top:-10px;
margin-left: 30px;
}

div#angle1 {
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
}
div#angle2 {
    -ms-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}


#bague1 {
	position:absolute;
    width: 14px;
    height: 48px;
    background: #996633;
    -moz-border-radius: 7px / 20px;
    -webkit-border-radius: 7px / 20px;
    border-radius: 7px / 20px;
	margin-left: 28px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.partie2 {
	position:absolute;
	width: 20px;
	height: 22px;
	background: #996633;
	margin-left: 58px;
	top:-12px;
}


#olive1 {
	position:absolute;
    width: 50px;
    height: 48px;
	background: #996633;
    -moz-border-radius: 25px / 20px;
    -webkit-border-radius: 25px / 20px;
    border-radius: 25px / 20px;
	margin-left: 78px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

#olive2 {
	position:absolute;
    width: 24px;
    height: 48px;
	background: #996633;
    -moz-border-radius: 12px / 20px;
    -webkit-border-radius: 12px / 20px;
    border-radius: 12px / 20px;
	margin-left: 128px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}
#bague2 {
	position:absolute;
    width: 10px;
    height: 48px;
	background: #996633;
    -moz-border-radius: 5px / 20px;
    -webkit-border-radius: 5px / 20px;
    border-radius: 12px / 5px;
	margin-left: 152px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}
#olive3 {
	position:absolute;
    width: 30px;
    height: 48px;
	background: #996633;
    -moz-border-radius: 15px / 20px;
    -webkit-border-radius: 15px / 20px;
    border-radius: 12px / 15px;
	margin-left: 162px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}
#bague3 {
	position:absolute;
    width: 10px;
    height: 48px;
	background: #996633;
    -moz-border-radius: 5px / 20px;
    -webkit-border-radius: 5px / 20px;
    border-radius: 12px / 5px;
	margin-left: 192px;
	top:-24px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}
#trou1 {
	position:absolute;
    width: 10px;
    height: 10px;
	background: black;
    -moz-border-radius: 10px / 10px;
    -webkit-border-radius: 10px / 10px;
    border-radius: 10px / 10px;
	margin-left: 250px;
	top:-8px;
}
#trou2 {
	position:absolute;
    width: 12px;
    height: 12px;
	background: black;
    -moz-border-radius: 12px / 12px;
    -webkit-border-radius: 12px / 12px;
    border-radius: 12px / 12px;
	margin-left: 290px;
	top:-9px;
}
#trou3 {
	position:absolute;
    width: 14px;
    height: 14px;
	background: black;
    -moz-border-radius: 14px / 14px;
    -webkit-border-radius: 14px / 14px;
    border-radius: 14px / 14px;
	margin-left: 330px;
	top:-10px;
}
#bague3 {
	position:absolute;
    width: 10px;
    height: 66px;
	background: #996633;
    -moz-border-radius: 5px / 20px;
    -webkit-border-radius: 5px / 20px;
    border-radius: 12px / 5px;
	margin-left: 392px;
	top:-34px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}


#trou4 {
	position:absolute;
    width: 16px;
    height: 16px;
	background: black;
    -moz-border-radius: 16px / 16px;
    -webkit-border-radius: 16px / 16px;
    border-radius: 16px / 16px;
	margin-left: 420px;
	top:-11px;
}
#trou5 {
	position:absolute;
    width: 18px;
    height: 18px;
	background: black;
    -moz-border-radius: 18px / 18px;
    -webkit-border-radius: 18px / 18px;
    border-radius: 18px / 18px;
	margin-left: 460px;
	top:-12px;
}
#trou6 {
	position:absolute;
    width: 20px;
    height: 20px;
	background: black;
    -moz-border-radius: 20px / 20px;
    -webkit-border-radius: 20px / 20px;
    border-radius: 20px / 20px;
	margin-left: 500px;
	top:-13px;
}
#fleur {
	position:absolute;
    width: 0;
    height: 0;
    border-top: 85px solid transparent;
    border-right: 95px solid #996633;
    border-bottom: 85px solid transparent;
	margin-left: 605px;
	top:-85px;
}
#decoupe1 {
	position:absolute;
    width: 50px;
    height: 70px;
	background: white;
    -moz-border-radius: 50px / 70px;
    -webkit-border-radius: 50px / 70px;
    border-radius: 50px / 70px;
	margin-left: 649px;
	top:-122px;
}
#decoupe2 {
	position:absolute;
    width: 50px;
    height: 70px;
	background: white;
    -moz-border-radius: 50px / 70px;
    -webkit-border-radius: 50px / 70px;
    border-radius: 50px / 70px;
	margin-left: 649px;
	top:47px;
}

#montre{
  position:fixed;
  width:150px;
  height:150px;
  margin-top:12%;
  margin-left:80%;

}



.le1
{
  background-image: none;
}

.le2
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo1.jpg);
}
.le3
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo2.jpg);
}
.le4
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo3.jpg);
}
.le5
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo5.jpg);
}
.le6
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo6.jpg);
}
.le7
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo7.jpg);
}
.le8
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo8.jpg);
}


img {
    display: none;
}

.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}  
   
 .placebas{
  position:fixed;

  margin-top:59%;
  color:#975401;

}  



.action{
  position:absolute;
  height:4%;
  width:1.4%;
  margin-top:45%;
  background:blue;
  border-right:1px solid #BBB;
  cursor:pointer;

}



</style>


</head>

<body>

  <body>


<header> 

 <div id="choix"> 
<ul class="menu">
  <li>lois
    <ul>
      <li><div id="zone3"><input type="button" value="zone3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/'"></div></li>
	
    </ul>
  </li><li>a
    <ul>
      <li><div id="a1"><input type="button" value="a1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/a1/'"></div></li>

    </ul>
  </li><li>b
    <ul>
      <li><div id="b1"><input type="button" value="b1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/b1/'"></div></li>

    </ul>

  </li><li>c
    <ul>
      <li><div id="c1"><input type="button" value="c1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/c1/'"></div></li>

    </ul>

  </li><li>d
    <ul>
      <li><div id="d1"><input type="button" value="d1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d1/'"></div></li>
      <li><div id="d2"><input type="button" value="d2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d2/'"></div></li>

    </ul>
  </li><li>e
    <ul>
      <li><div id="e1"><input type="button" value="e1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/e1/'"></div></li>

    </ul>

  </li><li>f
    <ul>
      <li><div id="f1"><input type="button" value="f1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f1/'"></div></li>
      <li><div id="f2"><input type="button" value="f2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f2/'"></div></li>

    </ul>

  </li><li>g
    <ul>
      <li><div id="g1"><input type="button" value="g1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g1/'"></div></li>
      <li><div id="g2"><input type="button" value="g2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g2/'"></div></li>
      <li><div id="g3"><input type="button" value="g3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g3/'"></div></li>
      <li><div id="g4"><input type="button" value="g4" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g4/'"></div></li>

    </ul>
  </li><li>h
    <ul>
      <li><div id="h1"><input type="button" value="h1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h1/'"></div></li>
      <li><div id="h2"><input type="button" value="h2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h2/'"></div></li>

    </ul>
  </li><li>i
    <ul>
      <li><div id="i1"><input type="button" value="i1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/i1/'"></div></li>

    </ul>
  </li><li>j
    <ul>
      <li><div id="j1"><input type="button" value="j1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/j1/'"></div></li>

    </ul>
  </li><li>k
    <ul>
      <li><div id="k1"><input type="button" value="k1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/k1/'"></div></li>

    </ul>
  </li><li>l
    <ul>
      <li><div id="l1"><input type="button" value="l1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/l1/'"></div></li>
      <li><div id="l2"><input type="button" value="l2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/l2/'"></div></li>

    </ul>
  </li><li>m
    <ul>
      <li><div id="m1"><input type="button" value="m1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/m1/'"></div></li>

    </ul>
  </li><li>n
    <ul>
      <li><div id="n1"><input type="button" value="n1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/n1/'"></div></li>

    </ul>
  </li><li>o
    <ul>
      <li><div id="o1"><input type="button" value="o1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/o1/'"></div></li>

    </ul>
  </li><li>p
    <ul>
      <li><div id="p1"><input type="button" value="p1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/p1/'"></div></li>

    </ul>
  </li><li>q
    <ul>
      <li><div id="p1"><input type="button" value="q1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/q1/'"></div></li>

    </ul>
  </li><li>r
    <ul>
      <li><div id="r1"><input type="button" value="r1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/r1/'"></div></li>

    </ul>
  </li><li>Zone
    <ul>
      <li><div id="Marteau"><input type="button" value="zone1" onclick="location.href='http://www.letime.net/PianoBaul/'"></div></li>
      <li><div id="zone2"><input type="button" value="zone2" onclick="location.href='http://www.letime.net/PianoBaul/zone2/'"></div></li>
    </ul>

  </li><li>Telechargement
    <ul>

      <li><div id="generateur"><input type="button" value="generateur" onclick="location.href='http://www.letime.net/PianoBaul/src.tar.gz'"></div></li>
      <li><div id="cours"><input type="button" value="cours" onclick="location.href='http://letime.net/cours/'" ></div></li>
      <li><div id="wiki"><input type="button" value="wiki" onclick="location.href='http://debian-facile.org/projets:sequenbaul'" ></div></li>
      <li><div id="montpellibre"><input type="button" value="montpellibre" onclick="location.href='http://letime.net/PianoBaul/montpellibre_kakemono.pdf'" ></div></li>
    </ul>
  </li>
</ul>

</div>

</header> 


      <div id="montre"></div>

<!-- en attente PianoBaul   -->

<div><audio id="1awav" src="http://www.letime.net/PianoBaul/zone3/r1/a2.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/zone3/r1/a3.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/zone3/r1/a4.wav" preload></audio></div>
<div><audio id="1dwav" src="http://www.letime.net/PianoBaul/zone3/r1/a5.wav" preload></audio></div>
<div><audio id="1ewav" src="http://www.letime.net/PianoBaul/zone3/r1/a6.wav" preload></audio></div>

<div><audio id="2awav" src="http://www.letime.net/PianoBaul/zone3/r1/z2.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/zone3/r1/z3.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/zone3/r1/z4.wav" preload></audio></div>
<div><audio id="2dwav" src="http://www.letime.net/PianoBaul/zone3/r1/z5.wav" preload></audio></div>
<div><audio id="2ewav" src="http://www.letime.net/PianoBaul/zone3/r1/z6.wav" preload></audio></div>

<div><audio id="3awav" src="http://www.letime.net/PianoBaul/zone3/r1/e2.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/zone3/r1/e3.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/zone3/r1/e4.wav" preload></audio></div>
<div><audio id="3dwav" src="http://www.letime.net/PianoBaul/zone3/r1/e5.wav" preload></audio></div>
<div><audio id="3ewav" src="http://www.letime.net/PianoBaul/zone3/r1/e6.wav" preload></audio></div>


<div><audio id="4awav" src="http://www.letime.net/PianoBaul/zone3/r1/r2.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/zone3/r1/r3.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/zone3/r1/r4.wav" preload></audio></div>
<div><audio id="4dwav" src="http://www.letime.net/PianoBaul/zone3/r1/r5.wav" preload></audio></div>
<div><audio id="4ewav" src="http://www.letime.net/PianoBaul/zone3/r1/r6.wav" preload></audio></div>

<div><audio id="5awav" src="http://www.letime.net/PianoBaul/zone3/r1/t2.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/zone3/r1/t3.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/zone3/r1/t4.wav" preload></audio></div>
<div><audio id="5dwav" src="http://www.letime.net/PianoBaul/zone3/r1/t5.wav" preload></audio></div>
<div><audio id="5ewav" src="http://www.letime.net/PianoBaul/zone3/r1/t6.wav" preload></audio></div>


<div><audio id="6awav" src="http://www.letime.net/PianoBaul/zone3/r1/y2.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/zone3/r1/y3.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/zone3/r1/y4.wav" preload></audio></div>
<div><audio id="6dwav" src="http://www.letime.net/PianoBaul/zone3/r1/y5.wav" preload></audio></div>
<div><audio id="6ewav" src="http://www.letime.net/PianoBaul/zone3/r1/y6.wav" preload></audio></div>


<div><audio id="7awav" src="http://www.letime.net/PianoBaul/zone3/r1/u2.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/zone3/r1/u3.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/zone3/r1/u4.wav" preload></audio></div>
<div><audio id="7dwav" src="http://www.letime.net/PianoBaul/zone3/r1/u5.wav" preload></audio></div>
<div><audio id="7ewav" src="http://www.letime.net/PianoBaul/zone3/r1/u6.wav" preload></audio></div>


<div><audio id="8awav" src="http://www.letime.net/PianoBaul/zone3/r1/i2.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/zone3/r1/i3.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/zone3/r1/i4.wav" preload></audio></div>
<div><audio id="8dwav" src="http://www.letime.net/PianoBaul/zone3/r1/i5.wav" preload></audio></div>
<div><audio id="8ewav" src="http://www.letime.net/PianoBaul/zone3/r1/i6.wav" preload></audio></div>


<div><audio id="9awav" src="http://www.letime.net/PianoBaul/zone3/r1/o2.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/zone3/r1/o3.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/zone3/r1/o4.wav" preload></audio></div>
<div><audio id="9dwav" src="http://www.letime.net/PianoBaul/zone3/r1/o5.wav" preload></audio></div>
<div><audio id="9ewav" src="http://www.letime.net/PianoBaul/zone3/r1/o6.wav" preload></audio></div>



<div><audio id="10awav" src="http://www.letime.net/PianoBaul/zone3/r1/p2.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/zone3/r1/p3.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/zone3/r1/p4.wav" preload></audio></div>
<div><audio id="10dwav" src="http://www.letime.net/PianoBaul/zone3/r1/p5.wav" preload></audio></div>
<div><audio id="10ewav" src="http://www.letime.net/PianoBaul/zone3/r1/p6.wav" preload></audio></div>

<div><audio id="11awav" src="http://www.letime.net/PianoBaul/zone3/r1/q2.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/zone3/r1/q3.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/zone3/r1/q4.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/zone3/r1/s2.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/zone3/r1/s3.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/zone3/r1/s4.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/zone3/r1/d2.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/zone3/r1/d3.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/zone3/r1/d4.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/zone3/r1/f2.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/zone3/r1/f3.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/zone3/r1/f4.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/zone3/r1/g2.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/zone3/r1/g3.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/zone3/r1/g4.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/zone3/r1/h2.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/zone3/r1/h3.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/zone3/r1/h4.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/zone3/r1/j2.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/zone3/r1/j3.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/zone3/r1/j4.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/zone3/r1/k2.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/zone3/r1/k3.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/zone3/r1/k4.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/zone3/r1/l2.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/zone3/r1/l3.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/zone3/r1/l4.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/zone3/r1/m2.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/zone3/r1/m3.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/zone3/r1/m4.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/zone3/r1/w2.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/zone3/r1/w3.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/zone3/r1/w4.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/zone3/r1/x2.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/zone3/r1/x3.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/zone3/r1/x4.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/zone3/r1/c2.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/zone3/r1/c3.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/zone3/r1/c4.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/zone3/r1/v2.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/zone3/r1/v3.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/zone3/r1/v4.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/zone3/r1/b2.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/zone3/r1/b3.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/zone3/r1/b4.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/zone3/r1/n2.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/zone3/r1/n3.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/zone3/r1/n4.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/zone3/r1/02.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/zone3/r1/03.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/zone3/r1/04.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/zone3/r1/12.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/zone3/r1/13.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/zone3/r1/14.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/zone3/r1/22.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/zone3/r1/23.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/zone3/r1/24.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/zone3/r1/32.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/zone3/r1/33.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/zone3/r1/34.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/zone3/r1/42.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/zone3/r1/43.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/zone3/r1/44.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/zone3/r1/52.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/zone3/r1/53.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/zone3/r1/54.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/zone3/r1/62.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/zone3/r1/63.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/zone3/r1/64.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/zone3/r1/72.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/zone3/r1/73.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/zone3/r1/74.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/zone3/r1/82.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/zone3/r1/83.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/zone3/r1/84.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/zone3/r1/92.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/zone3/r1/93.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/zone3/r1/94.wav" preload></audio></div>
<div><img id="logo1" src="http://www.letime.net/PianoBaul/montpellibre_logo1.jpg"  alt="logo1"></div>
<div><img id="logo2" src="http://www.letime.net/PianoBaul/montpellibre_logo2.jpg"  alt="logo2"></div>
<div><img id="logo3" src="http://www.letime.net/PianoBaul/montpellibre_logo3.jpg"  alt="logo3"></div>
<div><img id="logo4" src="http://www.letime.net/PianoBaul/montpellibre_logo5.jpg"  alt="logo4"></div>
<div><img id="logo5" src="http://www.letime.net/PianoBaul/montpellibre_logo6.jpg"  alt="logo5"></div>

<div class="centre">


<div id="bombarde">
        <div id="angle2" class="bec"></div>
        <div id="angle1" class="partie1"></div>
	<div id="bague1"></div>
        <div class="partie2"></div>
	<div id="olive1"></div>
	<div id="olive2"></div>
	<div id="bague2"></div>
	<div id="olive3"></div>
	<div id="trou1"></div>
	<div id="trou2"></div>
	<div id="trou3"></div>
	<div id="bague3"></div>
	<div id="trou4"></div>
	<div id="trou5"></div>
	<div id="trou6"></div>
	<div id="fleur"></div>
	<div id="decoupe1"></div>
	<div id="decoupe2"></div>
</div>




</div>




     
      <!-- DO gamme 1 corde17-->
      <div class="action" onMouseDown="action1Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:1%;"><audio id="1wav" src="http://www.letime.net/PianoBaul/zone3/r1/a1.wav" preload></audio></div>


      <!-- DO+ gamme 1 corde16-->
      <div class="action" onMouseDown="action2Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:3%;"><audio id="2wav" src="http://www.letime.net/PianoBaul/zone3/r1/z1.wav" preload></audio></div>


      <!-- RE gamme 1 corde15-->
      <div class="action" onMouseDown="action3Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:5%;"><audio id="3wav" src="http://www.letime.net/PianoBaul/zone3/r1/e1.wav" preload></audio></div>

      <!-- RE+ gamme 1 corde14-->
      <div class="action" onMouseDown="action4Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:7%;"><audio id="4wav" src="http://www.letime.net/PianoBaul/zone3/r1/r1.wav" preload></audio></div>



      <!-- MI gamme 1 corde13-->
      <div class="action" onMouseDown="action5Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:9%;"><audio id="5wav" src="http://www.letime.net/PianoBaul/zone3/r1/t1.wav" preload></audio></div>




      <!-- FA gamme 1 corde12-->
      <div class="action" onMouseDown="action6Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:11%;"><audio id="6wav" src="http://www.letime.net/PianoBaul/zone3/r1/y1.wav" preload></audio></div>



      <!-- FA+ gamme 1 corde11-->
      <div class="action" onMouseDown="action7Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:13%;"><audio id="7wav" src="http://www.letime.net/PianoBaul/zone3/r1/u1.wav" preload></audio></div>




      <!-- SOL gamme 1 corde27-->
      <div class="action" onMouseDown="action8Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:15%;"><audio id="8wav" src="http://www.letime.net/PianoBaul/zone3/r1/i1.wav" preload></audio></div>



      <!-- SOL+ gamme 1 corde26-->
      <div class="action" onMouseDown="action9Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:17%;"><audio id="9wav" src="http://www.letime.net/PianoBaul/zone3/r1/o1.wav" preload></audio></div>





      <!-- LA gamme 1 corde25-->
      <div class="action" onMouseDown="action10Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:21%;"><audio id="10wav" src="http://www.letime.net/PianoBaul/zone3/r1/p1.wav" preload></audio></div>




      <!-- LA+ gamme 1 corde24-->
      <div class="action" onMouseDown="action11Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:23%;"><audio id="11wav" src="http://www.letime.net/PianoBaul/zone3/r1/q1.wav" preload></audio></div>




      <!-- SI gamme 1 corde23-->
      <div class="action"  onMouseDown="action12Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:25%;"><audio id="12wav" src="http://www.letime.net/PianoBaul/zone3/r1/s1.wav" preload></audio></div>




      <!-- DO gamme 2 corde22-->
      <div class="action" onMouseDown="action13Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:27%;"><audio id="13wav" src="http://www.letime.net/PianoBaul/zone3/r1/d1.wav" preload></audio></div>



      <!-- DO+ gamme 2 corde21-->
      <div class="action" onMouseDown="action14Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:29%;"><audio id="14wav" src="http://www.letime.net/PianoBaul/zone3/r1/f1.wav" preload></audio></div>



      <!-- RE gamme 2 corde37-->
      <div class="action" onMouseDown="action15Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:31%;"><audio id="15wav" src="http://www.letime.net/PianoBaul/zone3/r1/g1.wav" preload></audio></div>




      <!-- RE+ gamme 2 corde36-->
      <div class="action" onMouseDown="action16Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:33%;"><audio id="16wav" src="http://www.letime.net/PianoBaul/zone3/r1/h1.wav" preload></audio></div>




      <!-- MI gamme 2 corde35-->
      <div class="action" onMouseDown="action17Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:35%;"><audio id="17wav" src="http://www.letime.net/PianoBaul/zone3/r1/j1.wav" preload></audio></div>




      <!-- FA gamme 2 corde34-->
      <div class="action" onMouseDown="action18Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:37%;"><audio id="18wav" src="http://www.letime.net/PianoBaul/zone3/r1/k1.wav" preload></audio></div>




      <!-- FA+ gamme 2 corde33-->
      <div class="action" onMouseDown="action19Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:39%;"><audio id="19wav" src="http://www.letime.net/PianoBaul/zone3/r1/k1.wav" preload></audio></div>




      <!-- SOL gamme 2 corde32-->
      <div class="action" onMouseDown="action20Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:41%;"><audio id="20wav" src="http://www.letime.net/PianoBaul/zone3/r1/m1.wav" preload></audio></div>



      <!-- SOL+ gamme 2 corde31-->
      <div class="action" onMouseDown="action21Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:43%;"><audio id="21wav" src="http://www.letime.net/PianoBaul/zone3/r1/w1.wav" preload></audio></div>




      <!-- LA gamme 2 corde47-->
      <div class="action" onMouseDown="action22Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:45%;"><audio id="22wav" src="http://www.letime.net/PianoBaul/zone3/r1/x1.wav" preload></audio></div>

      <!-- LA+ gamme 2 corde46-->
      <div class="action" onMouseDown="action23Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:47%;"><audio id="23wav" src="http://www.letime.net/PianoBaul/zone3/r1/c1.wav" preload></audio></div>



      <!-- SI gamme 2 corde45-->
      <div class="action" onMouseDown="action24Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:49%;"><audio id="24wav" src="http://www.letime.net/PianoBaul/zone3/r1/v1.wav" preload></audio></div>




      <!-- DO gamme 3 corde44-->
      <div class="action" onMouseDown="action25Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:51%;"><audio id="25wav" src="http://www.letime.net/PianoBaul/zone3/r1/b1.wav" preload></audio></div>

      <!-- DO+ gamme 3 corde43-->
      <div class="action" onMouseDown="action26Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:53%;"><audio id="26wav" src="http://www.letime.net/PianoBaul/zone3/r1/n1.wav" preload></audio></div>



      <!-- RE gamme 3 corde42-->
      <div class="action" onMouseDown="action27Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:55%;"><audio id="27wav" src="http://www.letime.net/PianoBaul/zone3/r1/01.wav" preload></audio></div>

      <!-- RE+ gamme 3 corde41-->
      <div class="action" onMouseDown="action28Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:57%;"><audio id="28wav" src="http://www.letime.net/PianoBaul/zone3/r1/11.wav" preload></audio></div>


      <!-- MI gamme 3 corde57-->
      <div class="action" onMouseDown="action29Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:59%;"><audio id="29wav" src="http://www.letime.net/PianoBaul/zone3/r1/21.wav" preload></audio></div>



      <!-- FA gamme 3 corde56-->
      <div class="action" onMouseDown="action30Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:61%;"><audio id="30wav" src="http://www.letime.net/PianoBaul/zone3/r1/31.wav" preload></audio></div>

      <!-- FA+ gamme 3 corde55-->
      <div class="action" onMouseDown="action31Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:63%;"><audio id="31wav" src="http://www.letime.net/PianoBaul/zone3/r1/41.wav" preload></audio></div>



      <!-- SOL gamme 3 corde54-->
      <div class="action" onMouseDown="action32Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:65%;"><audio id="32wav" src="http://www.letime.net/PianoBaul/zone3/r1/51.wav" preload></audio></div>

      <!-- SOL+ gamme 3 corde53-->
      <div class="action" onMouseDown="action33Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:67.15%;"><audio id="33wav" src="http://www.letime.net/PianoBaul/zone3/r1/61.wav" preload></audio></div>

      <!-- LA gamme 3 corde52-->
      <div class="action" onMouseDown="action34Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:69%;"><audio id="34wav" src="http://www.letime.net/PianoBaul/zone3/r1/71.wav" preload></audio></div>

      <!-- LA+ gamme 3 corde51-->
      <div class="action" onMouseDown="action35Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:71%;"><audio id="35wav" src="http://www.letime.net/PianoBaul/zone3/r1/81.wav" preload></audio></div>


      <!-- SI gamme 3 -->
      <div class="action" onMouseDown="action36Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:73%;"><audio id="36wav" src="http://www.letime.net/PianoBaul/zone3/r1/91.wav" preload></audio></div> 
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     




















</body>

</html> 

En créant nos instruments de musiques parfois nous avons besoin d'arc de cercle.
En exemple pour la flute traversière, j'écris

#ptrou1{
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid black;
  border-left: 3px solid black;
  border-top-left-radius: 40px;
  border-bottom-left-radius:2em; 
	margin-left: 50px;
}

Pour dessiner le contour autour du bec, un arc de cercle. En fait les outils clef qui me permettent de créer les arc de cercle sont :

border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px; 

Nous pouvons aussi utiliser

border-radius:

avec les valeurs derrières comme je l'ai déjà fait sur plusieurs instrument, mais je trouve que c'est plus difficile à manipuler, car j'ai du m'y reprendre de nombreuses fois pour avoir le dessin désiré.

Code avec note sur cordes

<!DOCTYPE html>
<html>


<head>
<title>PianoBaul HTML5 zone guitare electrique</title>

<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.letime.net/PianoBaul/GuitarElectric/x/" />

<meta name="description" content="Piano virtuel zone guitare electrique application sur le temps" />
<meta content="temps,piano,abadie.jo,audio,format audio" name="keywords" />
<meta name="generator" content="abadie joris" />
<meta content="ALL" name="Robots" />
<meta content="index,follow" name="Robots" />
<meta name="author" content="Abadie joris andre" />

<script type="text/javascript">


if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/GuitarElectric/x/";
}

    	 var mua1 = 0;
    	 var mua2 = 0;
    	 var mua3 = 0;
    	 var mua4 = 0;
    	 var mua5 = 0;
    	 var mua6 = 0;
    	 var mua7 = 0;
    	 var mua8 = 0;
    	 var mua9 = 0;
    	 var mua10 = 0;
    	 var mua11 = 0;
    	 var mua12 = 0;
    	 var mua13 = 0;
    	 var mua14 = 0;
    	 var mua15 = 0;
    	 var mua16 = 0;
    	 var mua17 = 0;
    	 var mua18 = 0;
    	 var mua19 = 0;
    	 var mua20 = 0;
    	 var mua21 = 0;
    	 var mua22 = 0;
    	 var mua23 = 0;
    	 var mua24 = 0;
    	 var mua25 = 0;
    	 var mua26 = 0;
    	 var mua27 = 0;
    	 var mua28 = 0;
    	 var mua29 = 0;
    	 var mua30 = 0;
    	 var mua31 = 0;
    	 var mua32 = 0;
    	 var mua33 = 0;
    	 var mua34 = 0;
    	 var mua35 = 0;
    	 var mua36 = 0;

	var lelogo = 0;
   	 

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
    	case "a":
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
   	break;
   	
    	case "z":
    	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
   	break;
   	
    	case "e":
    	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
   	break;
   	
    	case "r":
    	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
   	break;
   	
    	case "t":
    	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
   	break;
   	
    	case "y":
    	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchet(mua6);
   	break;
   	
    	case "u":
    	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
   	break;
   	
    	case "i":
    	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
   	break;
   	
    	case "o":
    	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
   	break;
   	
    	case "p":
    	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
   	break;
   	
    	case "q":
    	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
   	break;
   	
    	case "s":
    	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
   	break;
   	
    	case "d":
    	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
   	break;
   	
    	case "f":
    	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
   	break;
   	
    	case "g":
    	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
   	break;
   	
    	case "h":
    	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
   	break;
   	
    	case "j":
    	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
   	break;
   	
    	case "k":
    	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
   	break;
   	
    	case "l":
    	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
   	break;
   	
    	case "m":
    	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
   	break;
   	
    	case "w":
    	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
   	break;
   	
    	case "x":
    	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
   	break;
   	
    	case "c":
    	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouchec(mua23);
   	break;
   	
    	case "v":
    	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
   	break;
   	
    	case "b":
    	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
   	break;
   	
    	case "n":
    	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
   	break;
   	
    	case "0":
    	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
   	break;
   	
    	case "1":
    	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
   	break;
   	
    	case "2":
    	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
   	break;
   	
    	case "3":
    	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
   	break;
   	
    	case "4":
    	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
   	break;
   	
    	case "5":
    	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
   	break;
   	
    	case "6":
    	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
   	break;
   	
    	case "7":
    	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
   	break;
   	
    	case "8":
    	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
   	break;
   	
    	case "9":
    	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
   	break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



  
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
  
  
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
  
  
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
  
  
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
  
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("34wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("34awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("34bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("34cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }



function action1Press(){
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
  }
function action2Press(){
	mua2 = mua2 + 1;
	if(mua2>3){
        mua2 =0;
  	}
	multitouchez(mua2);
  }
function action3Press(){
	mua3 = mua3 + 1;
	if(mua3>3){
        mua3 =0;
  	}
	multitouchee(mua3);
  }  
function action4Press(){
	mua4 = mua4 + 1;
	if(mua4>3){
        mua4 =0;
  	}
	multitoucher(mua4);
  }
function action5Press(){
	mua5 = mua5 + 1;
	if(mua5>3){
        mua5 =0;
  	}
	multitouchet(mua5);
  }
function action6Press(){
	mua6 = mua6 + 1;
	if(mua6>3){
        mua6 =0;
  	}
	multitouchey(mua6);
  }
function action7Press(){
	mua7 = mua7 + 1;
	if(mua7>3){
        mua7 =0;
  	}
	multitoucheu(mua7);
  }
function action8Press(){
	mua8 = mua8 + 1;
	if(mua8>3){
        mua8 =0;
  	}
	multitouchei(mua8);
  }
function action9Press(){
	mua9 = mua9 + 1;
	if(mua9>3){
        mua9 =0;
  	}
	multitoucheo(mua9);
  }
function action10Press(){
	mua10 = mua10 + 1;
	if(mua10>3){
        mua10 =0;
  	}
	multitouchep(mua10);
  }
function action11Press(){
	mua11 = mua11 + 1;
	if(mua11>3){
        mua11 =0;
  	}
	multitoucheq(mua11);
  }
function action12Press(){
	mua12 = mua12 + 1;
	if(mua12>3){
        mua12 =0;
  	}
	multitouches(mua12);
  }
function action13Press(){
	mua13 = mua13 + 1;
	if(mua13>3){
        mua13 =0;
  	}
	multitouched(mua13);
  }
function action14Press(){
	mua14 = mua14 + 1;
	if(mua14>3){
        mua14 =0;
  	}
	multitouchef(mua14);
  }
function action15Press(){
	mua15 = mua15 + 1;
	if(mua15>3){
        mua15 =0;
  	}
	multitoucheg(mua15);
  } 
function action16Press(){
	mua16 = mua16 + 1;
	if(mua16>3){
        mua16 =0;
  	}
	multitoucheh(mua16);
  }
function action17Press(){
	mua17 = mua17 + 1;
	if(mua17>3){
        mua17 =0;
  	}
	multitouchej(mua17);
  }
function action18Press(){
	mua18 = mua18 + 1;
	if(mua18>3){
        mua18 =0;
  	}
	multitouchek(mua18);
  }  
function action19Press(){
	mua19 = mua19 + 1;
	if(mua19>3){
        mua19 =0;
  	}
	multitouchel(mua19);
  }
function action20Press(){
	mua20 = mua20 + 1;
	if(mua20>3){
        mua20 =0;
  	}
	multitouchem(mua20);
  }
function action21Press(){
	mua21 = mua21 + 1;
	if(mua21>3){
        mua21 =0;
  	}
	multitouchew(mua21);
  }
function action22Press(){
	mua22 = mua22 + 1;
	if(mua22>3){
        mua22 =0;
  	}
	multitouchex(mua22);
  }
function action23Press(){
	mua23 = mua23 + 1;
	if(mua23>3){
        mua23 =0;
  	}
	multitouched(mua23);
  }
function action24Press(){
	mua24 = mua24 + 1;
	if(mua24>3){
        mua24 =0;
  	}
	multitouchev(mua24);
  }
function action25Press(){
	mua25 = mua25 + 1;
	if(mua25>3){
        mua25 =0;
  	}
	multitoucheb(mua25);
  }
function action26Press(){
	mua26 = mua26 + 1;
	if(mua26>3){
        mua26 =0;
  	}
	multitouchen(mua26);
  }
function action27Press(){
	mua27 = mua27 + 1;
	if(mua27>3){
        mua27 =0;
  	}
	multitouche0(mua27);
  }
function action28Press(){
	mua28 = mua28 + 1;
	if(mua28>3){
        mua28 =0;
  	}
	multitouche1(mua28);
  }
function action29Press(){
	mua29 = mua29 + 1;
	if(mua29>3){
        mua29 =0;
  	}
	multitouche2(mua29);
  }
function action30Press(){
	mua30 = mua30 + 1;
	if(mua30>3){
        mua30 =0;
  	}
	multitouche3(mua30);
  }
function action31Press(){
	mua31 = mua31 + 1;
	if(mua31>3){
        mua31 =0;
  	}
	multitouche4(mua31);
  }
function action32Press(){
	mua32 = mua32 + 1;
	if(mua32>3){
        mua32 =0;
  	}
	multitouche5(mua32);
  }
function action33Press(){
	mua33 = mua33 + 1;
	if(mua33>3){
        mua33 =0;
  	}
	multitouche6(mua33);
  }
function action34Press(){
	mua34 = mua34 + 1;
	if(mua34>3){
        mua34 =0;
  	}
	multitouche7(mua34);
  }
function action35Press(){
	mua35 = mua35 + 1;
	if(mua35>3){
        mua35 =0;
  	}
	multitouche8(mua35);
  } 
function action36Press(){
	mua36 = mua36 + 1;
	if(mua36>3){
        mua36 =0;
  	}
	multitouche9(mua36);
  }  

function pourlogo(){

	lelogo = lelogo + 1;
	if(lelogo>6){
        lelogo =0;
  	}
	multitouchelogo(lelogo);
  }
      


  function multitouchelogo(lelogo){

  if(lelogo==0){

  document.getElementById('montre').className = 'le2';
  }
  else if(lelogo==1){

  document.getElementById('montre').className = 'le3';
  }
  else if(lelogo==2){

  document.getElementById('montre').className = 'le4';
  }
  else if(lelogo==3){

  document.getElementById('montre').className = 'le5';
  }
  else if(lelogo==4){

  document.getElementById('montre').className = 'le6';
  }
  else if(lelogo==5){

  document.getElementById('montre').className = 'le7';
  }
  else if(lelogo==6){

  document.getElementById('montre').className = 'le8';
  }
  }


     
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
function actionUp(){
  document.getElementById('montre').className = 'le1';
}
   
    </script>  

<style>

.centre{
margin-top : 10%;
margin-left : 2%;
}

#table1 {
  position: absolute;
   display:block;
   width: 560px;
   height: 560px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 72px 108px 108px 72px;
   border-radius:        50%   90%  90%  50%  /  60%  80% 80%   60%  ;

}

#table2 {
  position: absolute;
top:5px;
margin-left : 300px;
   display:block;
   width: 360px;
   height: 540px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 72px 108px 108px 72px;
   border-radius:        90%   50%  50%  90%  /  80%  60% 80%   60%  ;
}

#decoupe1 {
  position: absolute;
top:20px;
margin-left : 220px;
    width: 400px;
    height: 200px;
    background: white;
    -moz-border-radius: 200px / 100px;
    -webkit-border-radius: 200px / 100px;
    border-radius: 200px / 100px;
}
#decoupe2 {
  position: absolute;
top:310px;
margin-left : 120px;
    width: 400px;
    height: 224px;
    background: white;
    -moz-border-radius: 200px / 100px;
    -webkit-border-radius: 200px / 100px;
    border-radius: 200px / 100px;
}

#lemanche {
    content: "";  
  position: absolute;
top:212px;
    border-radius: 25px 55px 25px 25px/25px 90px 25px 25px;
    background: #990000;

    width: 600px;
    height: 100px;

	margin-left:50%;
}

#repere1 {
	position:absolute;
    background: black;
    width: 3px;
   height: 100%;
top: 1px;
	margin-left:14px;
}
#repere2 {
	position:absolute;
    background: black;
    width: 3px;
   height: 100%;
top: 1px;
	margin-left:22px;
}
#repere3 {
	position:absolute;
    background: black;
    width: 3px;
   height: 100%;
top: 1px;
	margin-left:37px;
}
#repere4 {
	position:absolute;
    background: black;
    width: 3px;
   height: 100%;
top: 1px;
	margin-left:52px;
}
#repere5 {
	position:absolute;
    background: black;
    width: 3px;
   height: 100%;
top: 1px;
	margin-left:67px;
}
#repere6 {
	position:absolute;
    background: black;
    width: 5px;
   height: 100%;
top: 1px;
	margin-left:82.5px;
}
#repere7 {
	position:absolute;
    background: black;
    width: 5px;
   height: 100%;
top: 1px;
	margin-left:99px;
}
#repere8 {
	position:absolute;
    background: black;
    width: 5px;
   height: 100%;
top: 1px;
	margin-left:115.5px;
}
#repere9 {
	position:absolute;
    background: black;
    width: 5px;
   height: 100%;
top: 1px;
	margin-left:135px;
}
#repere10 {
	position:absolute;
    background: black;
    width: 7px;
   height: 100%;
top: 1px;
	margin-left:153px;
}
#repere11 {
	position:absolute;
    background: black;
    width: 7px;
   height: 100%;
top: 1px;
	margin-left:175px;
}
#repere12 {
	position:absolute;
    background: black;
    width: 7px;
   height: 100%;
top: 1px;
	margin-left:197px;
}
#repere13 {
	position:absolute;
    background: black;
    width: 7px;
   height: 100%;
top: 1px;
	margin-left:219px;
}
#repere14 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:243px;
}
#repere15 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:271px;
}
#repere16 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:298px;
}
#repere17 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:326px;
}
#repere18 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:356px;
}
#repere19 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:389px;
}
#repere20 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:425px;
}
#repere21 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:461px;
}
#repere22 {
	position:absolute;
    background: black;
    width: 10px;
   height: 100%;
top: 1px;
	margin-left:500.5px;
}



#point {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:445px;
top: 45px;
}
#point1 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:371px;
top: 45px;
}

#point2 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:312px;
top: 45px;
}

#point3 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:256px;
top: 45px;
}

#point4 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:186px;
top: 65px;
}
#point5 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:186px;
top: 15px;
}

#point6 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:123px;
top: 45px;
}

#point7 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:89px;
top: 45px;
}

#point8 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:55px;
top: 45px;
}

#point9 {
  position: absolute;
   width: 10px;
   height: 20px;
   background-color: white;
   -webkit-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
	margin-left:27.5px;
top: 45px;
}

#corde1 {

	position:absolute;
    background: #B8E6E6;
    width: 870px;
    height: 10px;
	top:4px;
	left:-320px;
}


#corde1:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
  margin-top:205px;
}



#corde11 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde12 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde13 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde14 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde15 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde16 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde17 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde18 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde19 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde1a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde1b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde1c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde1d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde1e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde1f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde1g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}
#corde2 {

	position:absolute;
    background: #B8E6E6;
    width: 876px;
    height: 10px;
	top:19px;
	left:-320px;
}

#corde2:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
  top:25px;
}


#corde21 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde22 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde23 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde24 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde25 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde26 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde27 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde28 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde29 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde2a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde2b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde2c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde2d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde2e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde2f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde2g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}

#corde3 {
	position:absolute;
    background: #B8E6E6;
    width: 882px;
    height: 10px;
	top:34px;
	left:-320px;
}

#corde3:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
	top:39px;
}

#corde31 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde32 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde33 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde34 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde35 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde36 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde37 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde38 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde39 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde3a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde3b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde3c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde3d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde3e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde3f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde3g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}

#corde4 {

	position:absolute;
    background: #B8E6E6;
    width: 888px;
    height: 10px;
	top:49px;
	left:-320px;
}

#corde4:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
  margin-top:54px;
}

#corde41 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde42 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde43 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde44 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde45 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde46 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde47 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde48 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde49 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde4a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde4b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde4c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde4d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde4e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde4f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde4g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}
#corde5 {

	position:absolute;
    background: #B8E6E6;
    width: 894px;
    height: 10px;
	top:64px;
	left:-320px;
}
#corde5:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
  margin-top:69px;
}

#corde51 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde52 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde53 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde54 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde55 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde56 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde57 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde58 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde59 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde5a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde5b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde5c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde5d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde5e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde5f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde5g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}
#corde6 {

	position:absolute;
    background: #B8E6E6;
    width: 900px;
    height: 10px;
	top:79px;
	left:-320px;
}
#corde6:active{
  -webkit-transform:perspective(13px) rotatey(-6deg);
  transform:perspective(13px) rotatey(-6deg);
  margin-top:84px;
}

#corde61 {
	position:absolute;

    width: 320px;
    height: 10px;
	margin-left:-320px
  cursor:pointer;
}

#corde62 {
	position:absolute;

    width: 40px;
    height: 10px;
	margin-left:830px;
  cursor:pointer;

}
#corde63 {
	position:absolute;

    width: 32px;
    height: 10px;
	margin-left:790px;
  cursor:pointer;

}
#corde64 {
	position:absolute;

    width: 28px;
    height: 10px;
	margin-left:755px;
  cursor:pointer;

}
#corde65 {
	position:absolute;

    width: 24px;
    height: 10px;
	margin-left:720px;
  cursor:pointer;

}
#corde66 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:685px;
  cursor:pointer;

}
#corde67 {
	position:absolute;

    width: 22px;
    height: 10px;
	margin-left:655px;
  cursor:pointer;

}
#corde68 {
	position:absolute;
    width: 20px;
    height: 10px;
	margin-left:626px;
  cursor:pointer;

}
#corde69 {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:598px;
  cursor:pointer;

}
#corde6a {
	position:absolute;
    width: 19px;
    height: 10px;
	margin-left:570px;
  cursor:pointer;

}

#corde6b {
	position:absolute;
    width: 18px;
    height: 10px;
	margin-left:545px;
  cursor:pointer;
}

#corde6c {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:522px;
  cursor:pointer;

}
#corde6d {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:500px;
  cursor:pointer;

}
#corde6e {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:479px;
  cursor:pointer;

}
#corde6f {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:458px;
  cursor:pointer;

}
#corde6g {
	position:absolute;
    width: 17px;
    height: 10px;
	margin-left:439px;
  cursor:pointer;

}

#attachecordes {

	position:absolute;
    background: #B8E6E6;
    width: 30px;
    height: 100px;
	left:-320px;
	top:-5px;
}

#montre{
  position:fixed;
  width:150px;
  height:150px;
  margin-top:12%;
  margin-left:80%;

}



.le1
{
  background-image: none;
}

.le2
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo1.jpg);
}
.le3
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo2.jpg);
}
.le4
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo3.jpg);
}
.le5
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo5.jpg);
}
.le6
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo6.jpg);
}
.le7
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo7.jpg);
}
.le8
{
  background-image: url(http://www.letime.net/PianoBaul/montpellibre_logo8.jpg);
}


img {
    display: none;
}

.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}  
   
 .placebas{
  position:fixed;

  margin-top:59%;
  color:#975401;

}  

.action{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:55%;
  background:blue;
  border-right:1px solid #BBB;
  cursor:pointer;

}



</style>

</head>


  <body>

<header> 

 <div id="choix"> 
<ul class="menu">
  <li>lois
    <ul>
      <li><div id="zone4"><input type="button" value="zone4" onclick="location.href='http://www.letime.net/PianoBaul/zone4/'"></div></li>
	
    </ul>
  </li><li>a
    <ul>
      <li><div id="a1"><input type="button" value="flute" onclick="location.href='http://www.letime.net/PianoBaul/zone4/a1/'"></div></li>

    </ul>
  </li><li>b
    <ul>
      <li><div id="b1"><input type="button" value="Barbitos" onclick="location.href='http://www.letime.net/PianoBaul/zone4/b1/'"></div></li>

    </ul>

  </li><li>c
    <ul>
      <li><div id="c1"><input type="button" value="vibraphone" onclick="location.href='http://www.letime.net/PianoBaul/zone4/c1/'"></div></li>

    </ul>

  </li><li>d
    <ul>
      <li><div id="d1"><input type="button" value="Guitar elec" onclick="location.href='http://www.letime.net/PianoBaul/GuitarElectric/'"></div></li>
      <li><div id="d2"><input type="button" value="d2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/d2/'"></div></li>

    </ul>
  </li><li>e
    <ul>
      <li><div id="e1"><input type="button" value="e1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/e1/'"></div></li>

    </ul>

  </li><li>f
    <ul>
      <li><div id="f1"><input type="button" value="f1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f1/'"></div></li>
      <li><div id="f2"><input type="button" value="f2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/f2/'"></div></li>

    </ul>

  </li><li>g
    <ul>
      <li><div id="g1"><input type="button" value="g1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g1/'"></div></li>
      <li><div id="g2"><input type="button" value="g2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g2/'"></div></li>
      <li><div id="g3"><input type="button" value="g3" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g3/'"></div></li>
      <li><div id="g4"><input type="button" value="g4" onclick="location.href='http://www.letime.net/PianoBaul/zone3/g4/'"></div></li>

    </ul>
  </li><li>h
    <ul>
      <li><div id="h1"><input type="button" value="h1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h1/'"></div></li>
      <li><div id="h2"><input type="button" value="h2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/h2/'"></div></li>

    </ul>
  </li><li>i
    <ul>
      <li><div id="i1"><input type="button" value="i1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/i1/'"></div></li>

    </ul>
  </li><li>j
    <ul>
      <li><div id="j1"><input type="button" value="j1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/j1/'"></div></li>

    </ul>
  </li><li>k
    <ul>
      <li><div id="k1"><input type="button" value="k1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/k1/'"></div></li>

    </ul>
  </li><li>l
    <ul>
      <li><div id="l1"><input type="button" value="l1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/l1/'"></div></li>
      <li><div id="l2"><input type="button" value="l2" onclick="location.href='http://www.letime.net/PianoBaul/zone3/l2/'"></div></li>

    </ul>
  </li><li>m
    <ul>
      <li><div id="m1"><input type="button" value="m1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/m1/'"></div></li>

    </ul>
  </li><li>n
    <ul>
      <li><div id="n1"><input type="button" value="n1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/n1/'"></div></li>

    </ul>
  </li><li>o
    <ul>
      <li><div id="o1"><input type="button" value="o1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/o1/'"></div></li>

    </ul>
  </li><li>p
    <ul>
      <li><div id="p1"><input type="button" value="p1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/p1/'"></div></li>

    </ul>
  </li><li>q
    <ul>
      <li><div id="q1"><input type="button" value="q1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/q1/'"></div></li>

    </ul>
  </li><li>r
    <ul>
      <li><div id="r1"><input type="button" value="r1" onclick="location.href='http://www.letime.net/PianoBaul/zone3/r1/'"></div></li>

    </ul>
  </li><li>Zone
    <ul>
      <li><div id="Marteau"><input type="button" value="zone1" onclick="location.href='http://www.letime.net/PianoBaul/'"></div></li>
      <li><div id="zone2"><input type="button" value="zone2" onclick="location.href='http://www.letime.net/PianoBaul/zone2/'"></div></li>
      <li><div id="zone4"><input type="button" value="zone4" onclick="location.href='http://www.letime.net/PianoBaul/zone4/'"></div></li>
    </ul>

  </li><li>Telechargement
    <ul>

      <li><div id="generateur"><input type="button" value="generateur" onclick="location.href='http://www.letime.net/PianoBaul/src.tar.gz'"></div></li>
      <li><div id="cours"><input type="button" value="cours" onclick="location.href='http://letime.net/cours/'" ></div></li>
      <li><div id="wiki"><input type="button" value="wiki" onclick="location.href='http://debian-facile.org/projets:sequenbaul'" ></div></li>
      <li><div id="montpellibre"><input type="button" value="montpellibre" onclick="location.href='http://letime.net/PianoBaul/montpellibre_kakemono.pdf'" ></div></li>
    </ul>
  </li>
</ul>

</div>

</header> 




      <div id="montre"></div>

<!-- en attente PianoBaul   -->

<div><audio id="1awav" src="http://www.letime.net/PianoBaul/GuitarElectric/a2.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/a3.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/a4.wav" preload></audio></div>
<div><audio id="1dwav" src="http://www.letime.net/PianoBaul/GuitarElectric/a5.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/GuitarElectric/z2.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/z3.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/z4.wav" preload></audio></div>
<div><audio id="2dwav" src="http://www.letime.net/PianoBaul/GuitarElectric/z5.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/GuitarElectric/e2.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/e3.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/e4.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/GuitarElectric/r2.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/r3.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/r4.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/GuitarElectric/t2.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/t3.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/t4.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/GuitarElectric/y2.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/y3.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/y4.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/GuitarElectric/u2.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/u3.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/u4.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/GuitarElectric/i2.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/i3.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/i4.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/GuitarElectric/o2.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/o3.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/o4.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/GuitarElectric/p2.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/p3.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/p4.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/GuitarElectric/q2.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/q3.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/q4.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/GuitarElectric/s2.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/s3.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/s4.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/GuitarElectric/d2.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/d3.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/d4.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/GuitarElectric/f2.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/f3.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/f4.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/GuitarElectric/g2.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/g3.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/g4.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/GuitarElectric/h2.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/h3.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/h4.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/GuitarElectric/j2.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/j3.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/j4.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/GuitarElectric/k2.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/k3.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/k4.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/GuitarElectric/l2.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/l3.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/l4.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/GuitarElectric/m2.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/m3.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/m4.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/GuitarElectric/w2.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/w3.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/w4.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/GuitarElectric/x2.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/x3.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/x4.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/GuitarElectric/c2.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/c3.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/c4.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/GuitarElectric/v2.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/v3.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/v4.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/GuitarElectric/b2.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/b3.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/b4.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/GuitarElectric/n2.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/n3.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/n4.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/GuitarElectric/02.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/03.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/04.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/GuitarElectric/12.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/13.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/14.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/GuitarElectric/22.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/23.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/24.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/GuitarElectric/32.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/33.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/34.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/GuitarElectric/42.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/43.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/44.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/GuitarElectric/52.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/53.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/54.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/GuitarElectric/62.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/63.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/64.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/GuitarElectric/72.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/73.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/74.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/GuitarElectric/82.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/83.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/84.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/GuitarElectric/92.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/GuitarElectric/93.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/GuitarElectric/94.wav" preload></audio></div>
<div><img id="logo1" src="http://www.letime.net/PianoBaul/montpellibre_logo1.jpg"  alt="logo1"></div>
<div><img id="logo2" src="http://www.letime.net/PianoBaul/montpellibre_logo2.jpg"  alt="logo2"></div>
<div><img id="logo3" src="http://www.letime.net/PianoBaul/montpellibre_logo3.jpg"  alt="logo3"></div>
<div><img id="logo4" src="http://www.letime.net/PianoBaul/montpellibre_logo5.jpg"  alt="logo4"></div>
<div><img id="logo5" src="http://www.letime.net/PianoBaul/montpellibre_logo6.jpg"  alt="logo5"></div>





<div class="centre">
 <div id="table1">
  <div id="table2"> 
   <div id="decoupe1"> </div>
   <div id="decoupe2"> </div>
   <div id="lemanche"> 

<div id="repere1"></div>
<div id="repere2"></div>
<div id="repere3"></div>
<div id="repere4"></div>
<div id="repere5"></div>
<div id="repere6"></div>
<div id="repere7"></div>
<div id="repere8"></div>
<div id="repere9"></div>
<div id="repere10"></div>
<div id="repere11"></div>
<div id="repere12"></div>
<div id="repere13"></div>
<div id="repere14"></div>
<div id="repere15"></div>
<div id="repere16"></div>
<div id="repere17"></div>
<div id="repere18"></div>
<div id="repere19"></div>
<div id="repere20"></div>
<div id="repere21"></div>
<div id="repere22"></div>


<div id="point"></div>
<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div>
<div id="point4"></div>
<div id="point5"></div>
<div id="point6"></div>
<div id="point7"></div>
<div id="point8"></div>
<div id="point9"></div>

	   <div id="corde1"> 
	<!-- MI gamme 1 -->
<div id="corde11" onMouseDown="action5Press();"></div>
	<!-- FA gamme 1 -->
<div id="corde12" onMouseDown="action6Press();"></div>
	<!-- FA+ gamme 1 -->
<div id="corde13" onMouseDown="action7Press();"></div>
	<!-- SOL gamme 1 -->
<div id="corde14" onMouseDown="action8Press();"></div>
	<!-- SOL+ gamme 1 -->
<div id="corde15" onMouseDown="action9Press();"></div>
	<!-- LA gamme 1 -->
<div id="corde16" onMouseDown="action10Press();"></div>
	<!-- LA+ gamme 1 -->
<div id="corde17" onMouseDown="action11Press();"></div>
	<!-- SI gamme 1 -->
<div id="corde18" onMouseDown="action12Press();"></div>
	<!-- DO gamme 2 -->
<div id="corde19" onMouseDown="action13Press();"></div>
	<!-- DO+ gamme 2 -->
<div id="corde1a" onMouseDown="action14Press();"></div>
	<!-- RE gamme 2 -->
<div id="corde1b" onMouseDown="action15Press();"></div>
	<!-- RE+ gamme 2 -->
<div id="corde1c" onMouseDown="action16Press();"></div>
	<!-- MI gamme 2 -->
<div id="corde1d" onMouseDown="action17Press();"></div>
	<!-- FA gamme 2 -->
<div id="corde1e" onMouseDown="action18Press();"></div>
	<!-- FA+ gamme 2 -->
<div id="corde1f" onMouseDown="action19Press();"></div>
	<!-- SOL gamme 2 -->
<div id="corde1g" onMouseDown="action20Press();"></div>

</div>
	   <div id="corde2">
	<!-- LA gamme 1 -->
<div id="corde21" onMouseDown="action10Press();"></div>
	<!-- LA+ gamme 1 -->
<div id="corde22" onMouseDown="action11Press();"></div>
	<!-- SI gamme 1 -->
<div id="corde23" onMouseDown="action13Press();"></div>
	<!-- DO gamme 2 -->
<div id="corde24" onMouseDown="action14Press();"></div>
	<!-- DO+ gamme 2 -->
<div id="corde25" onMouseDown="action15Press();"></div>
	<!-- RE gamme 2 -->
<div id="corde26" onMouseDown="action16Press();"></div>
	<!-- RE+ gamme 2 -->
<div id="corde27" onMouseDown="action17Press();"></div>
	<!-- MI gamme 2 -->
<div id="corde28" onMouseDown="action18Press();"></div>
	<!-- FA gamme 2 -->
<div id="corde29" onMouseDown="action19Press();"></div>
	<!-- FA+ gamme 2 -->
<div id="corde2a" onMouseDown="action20Press();"></div>
	<!-- SOL gamme 2 -->
<div id="corde2b" onMouseDown="action21Press();"></div>
	<!-- SOL+ gamme 2 -->
<div id="corde2c" onMouseDown="action22Press();"></div>
	<!-- LA gamme 2 -->
<div id="corde2d" onMouseDown="action23Press();"></div>
	<!-- LA+ gamme 2 -->
<div id="corde2e" onMouseDown="action24Press();"></div>
	<!-- SI gamme 2 -->
<div id="corde2f" onMouseDown="action25Press();"></div>
	<!-- DO gamme 3 -->
<div id="corde2g" onMouseDown="action26Press();"></div>

 </div>
	   <div id="corde3"> 
      <!-- RE gamme 2 -->
<div id="corde31" onMouseDown="action15Press();"></div>
	<!-- FA gamme 1 -->
<div id="corde32" onMouseDown="action16Press();"></div>
	<!-- RE+ gamme 2 -->
<div id="corde33" onMouseDown="action17Press();"></div>
	<!-- MI gamme 2 -->
<div id="corde34" onMouseDown="action18Press();"></div>
	<!-- FA gamme 2 -->
<div id="corde35" onMouseDown="action19Press();"></div>
	<!-- FA+ gamme 2 -->
<div id="corde36" onMouseDown="action20Press();"></div>
	<!-- SOL gamme 2 -->
<div id="corde37" onMouseDown="action21Press();"></div>
	<!-- SOL+ gamme 2 -->
<div id="corde38" onMouseDown="action22Press();"></div>
	<!-- LA gamme 2 -->
<div id="corde39" onMouseDown="action23Press();"></div>
	<!-- LA+ gamme 2 -->
<div id="corde3a" onMouseDown="action24Press();"></div>
	<!-- Si gamme 2 -->
<div id="corde3b" onMouseDown="action25Press();"></div>
	<!-- Do gamme 3 -->
<div id="corde3c" onMouseDown="action26Press();"></div>
	<!-- DO+ gamme 3 -->
<div id="corde3d" onMouseDown="action27Press();"></div>
	<!-- FA gamme 2 -->
<div id="corde3e" onMouseDown="action28Press();"></div>
	<!-- FA+ gamme 2 -->
<div id="corde3f" onMouseDown="action29Press();"></div>
	<!-- SOL gamme 2 -->
<div id="corde3g" onMouseDown="action30Press();"></div>

</div>
	   <div id="corde4"> 
      <!-- SOL gamme 2 -->
<div id="corde41" onMouseDown="action20Press();"></div>
	<!-- FA gamme 1 -->
<div id="corde42" onMouseDown="action21Press();"></div>
	<!-- FA+ gamme 1 -->
<div id="corde43" onMouseDown="action22Press();"></div>
	<!-- SOL gamme 1 -->
<div id="corde44" onMouseDown="action23Press();"></div>
	<!-- SOL+ gamme 1 -->
<div id="corde45" onMouseDown="action24Press();"></div>
	<!-- LA gamme 1 -->
<div id="corde46" onMouseDown="action25Press();"></div>
	<!-- LA+ gamme 1 -->
<div id="corde47" onMouseDown="action26Press();"></div>
	<!-- SI gamme 1 -->
<div id="corde48" onMouseDown="action27Press();"></div>
	<!-- DO gamme 2 -->
<div id="corde49" onMouseDown="action28Press();"></div>
	<!-- DO+ gamme 2 -->
<div id="corde4a" onMouseDown="action29Press();"></div>
	<!-- RE gamme 2 -->
<div id="corde4b" onMouseDown="action30Press();"></div>
	<!-- RE+ gamme 2 -->
<div id="corde4c" onMouseDown="action31Press();"></div>
	<!-- MI gamme 2 -->
<div id="corde4d" onMouseDown="action32Press();"></div>
	<!-- FA gamme 2 -->
<div id="corde4e" onMouseDown="action33Press();"></div>
	<!-- FA+ gamme 2 -->
<div id="corde4f" onMouseDown="action34Press();"></div>
	<!-- SOL gamme 2 -->
<div id="corde4g" onMouseDown="action35Press();"></div>
</div>
	   <div id="corde5"> 
      <!-- SI gamme 2 -->
<div id="corde51" onMouseDown="action24Press();"></div>
	<!-- FA gamme 1 -->
<div id="corde52" onMouseDown="action25Press();"></div>
	<!-- FA+ gamme 1 -->
<div id="corde53" onMouseDown="action26Press();"></div>
	<!-- SOL gamme 1 -->
<div id="corde54" onMouseDown="action27Press();"></div>
	<!-- SOL+ gamme 1 -->
<div id="corde55" onMouseDown="action28Press();"></div>
	<!-- LA gamme 1 -->
<div id="corde56" onMouseDown="action29Press();"></div>
	<!-- LA+ gamme 1 -->
<div id="corde57" onMouseDown="action30Press();"></div>
	<!-- SI gamme 1 -->
<div id="corde58" onMouseDown="action31Press();"></div>
	<!-- DO gamme 2 -->
<div id="corde59" onMouseDown="action32Press();"></div>
	<!-- DO+ gamme 2 -->
<div id="corde5a" onMouseDown="action33Press();"></div>
	<!-- RE gamme 2 -->
<div id="corde5b" onMouseDown="action34Press();"></div>
	<!-- RE+ gamme 2 -->
<div id="corde5c" onMouseDown="action35Press();"></div>
	<!-- MI gamme 2 -->
<div id="corde5d" onMouseDown="action36Press();"></div>


</div>
	   <div id="corde6"> 
      <!-- MI gamme 3 -->
<div id="corde61" onMouseDown="action29Press();"></div>
	<!-- FA gamme 1 -->
<div id="corde62" onMouseDown="action30Press();"></div>
	<!-- FA+ gamme 1 -->
<div id="corde63" onMouseDown="action31Press();"></div>
	<!-- SOL gamme 1 -->
<div id="corde64" onMouseDown="action32Press();"></div>
	<!-- SOL+ gamme 1 -->
<div id="corde65" onMouseDown="action33Press();"></div>
	<!-- LA gamme 1 -->
<div id="corde66" onMouseDown="action34Press();"></div>
	<!-- LA+ gamme 1 -->
<div id="corde67" onMouseDown="action35Press();"></div>
	<!-- SI gamme 1 -->
<div id="corde68" onMouseDown="action36Press();"></div>


</div>
	   <div id="attachecordes"> </div>
   </div>
  </div>
 </div>
</div>





     
      <!-- DO gamme 1 -->
      <div class="action" onMouseDown="action1Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:1%;"><audio id="1wav" src="http://www.letime.net/PianoBaul/GuitarElectric/a1.wav" preload></audio></div>


      <!-- DO+ gamme 1 -->
      <div class="action" onMouseDown="action2Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:3%;"><audio id="2wav" src="http://www.letime.net/PianoBaul/GuitarElectric/z1.wav" preload></audio></div>


      <!-- RE gamme 1 -->
      <div class="action" onMouseDown="action3Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:5%;"><audio id="3wav" src="http://www.letime.net/PianoBaul/GuitarElectric/e1.wav" preload></audio></div>

      <!-- RE+ gamme 1 -->
      <div class="action" onMouseDown="action4Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:7%;"><audio id="4wav" src="http://www.letime.net/PianoBaul/GuitarElectric/r1.wav" preload></audio></div>



      <!-- MI gamme 1 -->
      <div class="action" onMouseDown="action5Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:9%;"><audio id="5wav" src="http://www.letime.net/PianoBaul/GuitarElectric/t1.wav" preload></audio></div>




      <!-- FA gamme 1 -->
      <div class="action" onMouseDown="action6Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:11%;"><audio id="6wav" src="http://www.letime.net/PianoBaul/GuitarElectric/y1.wav" preload></audio></div>



      <!-- FA+ gamme 1 -->
      <div class="action" onMouseDown="action7Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:13%;"><audio id="7wav" src="http://www.letime.net/PianoBaul/GuitarElectric/u1.wav" preload></audio></div>




      <!-- SOL gamme 1 -->
      <div class="action" onMouseDown="action8Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:15%;"><audio id="8wav" src="http://www.letime.net/PianoBaul/GuitarElectric/i1.wav" preload></audio></div>



      <!-- SOL+ gamme 1 -->
      <div class="action" onMouseDown="action9Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:17%;"><audio id="9wav" src="http://www.letime.net/PianoBaul/GuitarElectric/o1.wav" preload></audio></div>





      <!-- LA gamme 1 -->
      <div class="action" onMouseDown="action10Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:21%;"><audio id="10wav" src="http://www.letime.net/PianoBaul/GuitarElectric/p1.wav" preload></audio></div>




      <!-- LA+ gamme 1 -->
      <div class="action" onMouseDown="action11Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:23%;"><audio id="11wav" src="http://www.letime.net/PianoBaul/GuitarElectric/q1.wav" preload></audio></div>




      <!-- SI gamme 1 -->
      <div class="action"  onMouseDown="action12Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:25%;"><audio id="12wav" src="http://www.letime.net/PianoBaul/GuitarElectric/s1.wav" preload></audio></div>




      <!-- DO gamme 2 -->
      <div class="action" onMouseDown="action13Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:27%;"><audio id="13wav" src="http://www.letime.net/PianoBaul/GuitarElectric/d1.wav" preload></audio></div>



      <!-- DO+ gamme 2 -->
      <div class="action" onMouseDown="action14Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:29%;"><audio id="14wav" src="http://www.letime.net/PianoBaul/GuitarElectric/f1.wav" preload></audio></div>



      <!-- RE gamme 2 -->
      <div class="action" onMouseDown="action15Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:31%;"><audio id="15wav" src="http://www.letime.net/PianoBaul/GuitarElectric/g1.wav" preload></audio></div>




      <!-- RE+ gamme 2 -->
      <div class="action" onMouseDown="action16Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:33%;"><audio id="16wav" src="http://www.letime.net/PianoBaul/GuitarElectric/h1.wav" preload></audio></div>




      <!-- MI gamme 2 -->
      <div class="action" onMouseDown="action17Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:35%;"><audio id="17wav" src="http://www.letime.net/PianoBaul/GuitarElectric/j1.wav" preload></audio></div>




      <!-- FA gamme 2 -->
      <div class="action" onMouseDown="action18Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:37%;"><audio id="18wav" src="http://www.letime.net/PianoBaul/GuitarElectric/k1.wav" preload></audio></div>




      <!-- FA+ gamme 2 -->
      <div class="action" onMouseDown="action19Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:39%;"><audio id="19wav" src="http://www.letime.net/PianoBaul/GuitarElectric/k1.wav" preload></audio></div>




      <!-- SOL gamme 2 -->
      <div class="action" onMouseDown="action20Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:41%;"><audio id="20wav" src="http://www.letime.net/PianoBaul/GuitarElectric/m1.wav" preload></audio></div>



      <!-- SOL+ gamme 2 -->
      <div class="action" onMouseDown="action21Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:43%;"><audio id="21wav" src="http://www.letime.net/PianoBaul/GuitarElectric/w1.wav" preload></audio></div>




      <!-- LA gamme 2 -->
      <div class="action" onMouseDown="action22Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:45%;"><audio id="22wav" src="http://www.letime.net/PianoBaul/GuitarElectric/x1.wav" preload></audio></div>

      <!-- LA+ gamme 2 -->
      <div class="action" onMouseDown="action23Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:47%;"><audio id="23wav" src="http://www.letime.net/PianoBaul/GuitarElectric/c1.wav" preload></audio></div>



      <!-- SI gamme 2 -->
      <div class="action" onMouseDown="action24Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:49%;"><audio id="24wav" src="http://www.letime.net/PianoBaul/GuitarElectric/v1.wav" preload></audio></div>




      <!-- DO gamme 3 -->
      <div class="action" onMouseDown="action25Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:51%;"><audio id="25wav" src="http://www.letime.net/PianoBaul/GuitarElectric/b1.wav" preload></audio></div>

      <!-- DO+ gamme 3 -->
      <div class="action" onMouseDown="action26Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:53%;"><audio id="26wav" src="http://www.letime.net/PianoBaul/GuitarElectric/n1.wav" preload></audio></div>



      <!-- RE gamme 3 -->
      <div class="action" onMouseDown="action27Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:55%;"><audio id="27wav" src="http://www.letime.net/PianoBaul/GuitarElectric/01.wav" preload></audio></div>

      <!-- RE+ gamme 3 -->
      <div class="action" onMouseDown="action28Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:57%;"><audio id="28wav" src="http://www.letime.net/PianoBaul/GuitarElectric/11.wav" preload></audio></div>


      <!-- MI gamme 3 -->
      <div class="action" onMouseDown="action29Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:59%;"><audio id="29wav" src="http://www.letime.net/PianoBaul/GuitarElectric/21.wav" preload></audio></div>



      <!-- FA gamme 3 -->
      <div class="action" onMouseDown="action30Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:61%;"><audio id="30wav" src="http://www.letime.net/PianoBaul/GuitarElectric/31.wav" preload></audio></div>

      <!-- FA+ gamme 3 -->
      <div class="action" onMouseDown="action31Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:63%;"><audio id="31wav" src="http://www.letime.net/PianoBaul/GuitarElectric/41.wav" preload></audio></div>



      <!-- SOL gamme 3 -->
      <div class="action" onMouseDown="action32Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:65%;"><audio id="32wav" src="http://www.letime.net/PianoBaul/GuitarElectric/51.wav" preload></audio></div>

      <!-- SOL+ gamme 3 -->
      <div class="action" onMouseDown="action33Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:67.15%;"><audio id="33wav" src="http://www.letime.net/PianoBaul/GuitarElectric/61.wav" preload></audio></div>

      <!-- LA gamme 3 -->
      <div class="action" onMouseDown="action34Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:69%;"><audio id="34wav" src="http://www.letime.net/PianoBaul/GuitarElectric/71.wav" preload></audio></div>

      <!-- LA+ gamme 3 -->
      <div class="action" onMouseDown="action35Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:71%;"><audio id="35wav" src="http://www.letime.net/PianoBaul/GuitarElectric/81.wav" preload></audio></div>


      <!-- SI gamme 3 -->
      <div class="action" onMouseDown="action36Press();pourlogo();" onMouseUp="actionUp();" style="margin-left:73%;"><audio id="36wav" src="http://www.letime.net/PianoBaul/GuitarElectric/91.wav" preload></audio></div> 
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     




















</body>

</html> 

Cordialement

Dernière modification par temps (Le 28/07/2015, à 17:14)


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