Contenu | Rechercher | Menus

Annonce

Les inscriptions sont fermées actuellement, suite à une importante vague de spam.
Si vous rencontrez des soucis à rester connecté sur le forum (ou si vous avez perdu votre mot de passe) déconnectez-vous et reconnectez-vous depuis cette page, en cochant la case "Me connecter automatiquement lors de mes prochaines visites".
nombre réponses : 25

#0 Re : -1 »  [Résolu]Deux vidéos en même temps » Le 31/08/2015, à 21:16

temps
Réponses : 5

Bonjour,
la plupart des applications vidéo sous linux permettent d’avoir plusieurs pistes.
Même dans l'ancêtre kino il est possible de créer des montages, les solutions sont nombreuses même s'il n'y avait qu'une piste, il suffit de morceler et de réunir selon l'idée en déplaçant, copiant, exportant et supprimant ...
Cordialement

#1 -1 »  css3 vs jpg du poids et des images » Le 30/08/2015, à 11:00

temps
Réponses : 2

Bonjour,

Si nous prenons une image de jpg web de 108px x 72px le poids tourne autour de 1 ko

Prenons le cas du drapeau français à ce format ouvrant un lien :

<a href="http://www.letime.net/cours/" ><img src="http://www.letime.net/cours/fr.jpg" height=72 width=119 alt="Fr" /></a>

cela demande de télécharger plus d'un ko.

Maintenant reprenons le même cas en construisant nos images en css3

pour le style dans head

<style>

.trait_vertical1{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: #0033CC;
  cursor:pointer;
}
.trait_vertical1:active{
  background-color: #F5FFFA;
}
.trait_vertical2{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: white;
}
.trait_vertical3{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: red;
}
.trait_horizontal1{
	position:absolute;
  width: 108px;
  height: 24px;
  background-color: black;
  cursor:pointer;
}
.trait_horizontal1:active{
  background-color: #F5FFFA;
}
.trait_horizontal2{
	position:relative;
  width: 108px;
  height: 24px;
  top:24px;
  background-color: red;

}
.trait_horizontal3{
	position:relative;
  width: 108px;
  height: 24px;
  top:24px;
  background-color: yellow;

}

</style>

et dans le body

<div>
<div class="trait_vertical1" onclick="location.href='http://www.letime.net/cours/';"  style="margin-top:10px ; margin-left:10px">
<div class="trait_vertical2" style="margin-top:10px ; margin-left:36px">
<div class="trait_vertical3" style="margin-top:10px ; margin-left:36px">

</div>
</div>
</div>

<div class="trait_horizontal1" onclick="location.href='http://www.letime.net/cours/de/';"  style="margin-top:-72px ; margin-left:140px">
<div class="trait_horizontal2">
<div class="trait_horizontal3">

</div>
</div>
</div>

</div>

Nous créons nos images avec quelques octets et en plus nous pouvons même en codant un peu en faire des vidéos en reprenant la technique que j'indique sur un autre fil de discussion.

Cordialement

P.S. En plus pour ceux qui veulent protéger leur logo, l’image en css3 apporte des avantages de protections bien supérieur au jpg

#2 Re : -1 »  css3 vs jpg du poids et des images » Le 31/08/2015, à 18:13

temps
Réponses : 2

Bonjour,
Merci pour la réponse.
je pense que chaque cas est un cas très particulier.
Je crée actuellement des alphabet en css et un générateur texte css, en même temps que des instruments de musiques en css pour une application audio que j'ai créé.
je trouve que la technique apporte une légèreté inégalée et la possibilité de mini mouvements jusqu'au film inter-actif.
Bien que j'utilise le png depuis de nombreuses années, je n'ai jamais entrevus de telles possibilités.
Il y a quelques années j'avais créé un moteur de recherche qui mappait les images PNG, pour cliquer les choix, c'était bien plus lourd que le css qui en plus peut se compresser.
Il faudrait peut être écrire un module à gimp pour qu'il identifie toutes les formes d'une image de manière à l'exporter en css, pour pouvoir vraiment comparer.
Concernant la compatibilité, sortie de mozilla, je ne cherche même pas si ça marche.

Cordialement

#3 Re : -1 »  Projet alphabet css3 » Le 30/07/2015, à 08:46

temps
Réponses : 2

Bonjour,
Sans réponse je me lance sur une page ce matin. j'y décris le concept et les bases pour commencer à écrire.
voici le code :

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alphabet a l'usage des tux et des utilisateurs d'un langage multidirectionnel</title>

<style>


.arc_gauche{
  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;
}
.arc_double_droit{
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-left-radius: 40px;
  border-bottom-right-radius:40px; 
	margin-left: 50px;
}

.arc_double_couleur{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.petit_arc_double_couleur{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.trait_vertical{
	position:absolute;
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 


.penche60 {
    -webkit-transform: rotatex(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotatex(60deg);
    transform-style: preserve-3d;
} 

div#angle1 {
    -ms-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    transform: rotate(20deg); 
}

div#angle2 {
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}



.trait_penche{
	position:absolute;
  width: 3px;
  height: 40px;
    -webkit-transform: rotatex(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotatex(60deg);
    transform-style: preserve-3d;
	background-color: green;
	margin-left: 50px;
}

.trait_penche:active{
  margin-left:45px;
}

.trait_penche:hover {
  margin-left:85px;
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}



.montre1{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}


.montre2{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-left: 3px solid #CC6699;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.montre3{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.montre4{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}


.montre5{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.boucle1{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.mon_humeur{
	position:absolute;
  width: 798px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 1px;
}

.sortie_droite{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.entre_gauche{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-right: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:5px;
border-bottom-left-radius:20px;

}

.entre_passe{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:5px;
border-bottom-left-radius:20px;

}
.sortie_droite1{
	position:absolute;
  width: 20px;
  height: 18px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:1px;
border-top-right-radius:1px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 47px;
}
/*16 lettre 3*/


.boucle2{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}


.boucle3{
  width: 20px;
  height: 20px;
  border: 0px;
  border-top: 3px solid #4477FF;
  border-left: 3px solid #4477FF;
  border-bottom: 3px solid #4477FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:20px;

}

.montre7{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-left: 3px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle4{
	position:absolute;
  width: 20px;
  height: 10px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}

.boucle5{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle6{
	position:absolute;
  width: 10px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle7{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #800000;
  border-left: 3px solid #800000;
  border-top: 3px solid #800000;
  border-right: 3px solid #800000;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}

.montre8{
	position:absolute;
  width: 25px;
  height: 8px;
  border: 0px;
  border-bottom: 3px solid #800000;
border-top-left-radius:8px;
border-top-right-radius:25px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

}

.montre9{
	position:absolute;
  width: 20px;
  height: 42px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;

}

.boucle8{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;

  border-top: 3px solid #3366FF;
  border-right: 3px solid #3366FF;
border-top-left-radius:2px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:1px;
 margin-left:20px;

}
.boucle8:hover {
  margin-left:85px;
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}

.boucle8:active{
  margin-left:45px;
}




.montre10{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;

}

</style>

</head>

<body>
<p>J'ai grandis avec des coutumes multidirectionnelles, qui induisent des logiques multidirectionnelles.
<br />
Avec l'aire du numérique qui remplace l'analogique, j'ai vu les savoirs se perdre et même devenir incompréhensible car ne pouvant être perçue en utilisant une logique unidirectionnelle. Je pense que ceci est induit par le fait que les langages actuels sont tous unidirectionnels et que les langages par l'utilisations d'internet remplacent de plus en plus les contacts humains.
<br />
J'ai essayé de créer plusieurs techniques pour contrer cet effet. La création d'un alphabet css3, n'en est qu'une de plus.
<br /> <br />
Le but est de créer des effets en associant plusieurs causes, sens du terme, forme de lettre, mouvement de lettre, son différent de celui de la lettre attendue. L'effet final n'est que l'équilibre du tout et n'a de sens que dans le tout. Un langage multidirectionnel à la hauteur de l'homme en opposition aux langages unidirectionnels qui nous abaissent à la servilité des animaux.
<br /> Des millénaires d'évolution, perdus en une génération.</p>


<h1> alphabet css3</h1>
<h3>L'indentation, c'est le mal<br />
Ce n'est pas parce que les machines ne peuvent pas classer le contenue de nos échanges, <br />
que nous devons les abandonner, quitte à ne plus être référencé sur les moteurs de recherches</h3>

<p>
<h5>1- lettre c noire</h5>

<pre>

.arc_gauche{
  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;
}
...sortie head entre dans body..

div class="arc_gauche"

</pre>
<div class="arc_gauche"></div>

<h5>2- lettre j bleu</h5>

<pre>

.arc_double_droit{
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-left-radius: 40px;
  border-bottom-right-radius:40px; 
	margin-left: 50px;
}
...sortie head entre dans body..

div class="arc_double_droit"

</pre>
<div class="arc_double_droit"></div>


<h5>3- lettre o bicolore</h5>

<pre>

.arc_double_couleur{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="arc_double_couleur"

</pre>
<div class="arc_double_couleur"></div>

<h5>4- lettre l bicolore</h5>

<pre>

.trait_vertical{
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 

...sortie head entre dans body..

div class="trait_vertical varie"

</pre>
<div class="trait_vertical varie"></div>

<br />
<br />
<h5>5- lettre composée en associations</h5>

<pre>

.petit_arc_double_couleur{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.trait_vertical{
	position:absolute;
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 

...sortie head entre dans body..
2 div pour ne pas mélanger les caractéristiques
En déplaçant à l'aide de top ou left on crée le q, le d, le b

div class="petit_arc_double_couleur"
div class="trait_vertical varie"

</pre>
<div class="petit_arc_double_couleur"></div>
<div class="trait_vertical varie"></div>


<br />
<br />
<h5>6- lettre composée en associations 2, le dernier qui parle a raison</h5>

<pre>

div class="petit_arc_double_couleur" style="margin-left:36px"
div class="trait_vertical varie"

</pre>
<div class="petit_arc_double_couleur" style="margin-left:36px"></div>
<div class="trait_vertical varie"></div>
<br />
<br />

<h5>7- l'héritage</h5>

<pre>
div class="penche60
div class="petit_arc_double_couleur" style="margin-left:36px"  fin div
div class="trait_vertical varie"  fin div
fin div donnant heritage
</pre>
<div class="penche60">

<div class="petit_arc_double_couleur" style="margin-left:36px"></div>
<div class="trait_vertical varie penche60"></div>

</div>

<br />
<br />





<h5>8- Mouvement en 2 temps, 1 au clique 5px vers la gauche, 2 au passage souris vers la droite <br />
En application pour que le mot se mette en forme qu'au clique de souris</h5>

<pre>
div class="trait_penche" onMouseDown=""
</pre>
<div class="trait_penche" onMouseDown="">


</div>



<br />
<br />


<h5>9- Montre1</h5>

<pre>

.montre1{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre1"

</pre>
<div class="montre1"></div>

<br />
<br />


<h5>10- Montre2</h5>

<pre>

.montre2{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-left: 3px solid #CC6699;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre2"

</pre>
<div class="montre2"></div>

<br />
<br />
<h5>11- Montre3</h5>

<pre>

.montre3{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre3"

</pre>
<div class="montre3"></div>

<br />
<br />
<h5>12- Montre4</h5>

<pre>

.montre4{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre4"

</pre>
<div class="montre4"></div>
<br />
<br />
<h5>13- Montre5</h5>

<pre>


...sortie head entre dans body..

div class="montre4"
div class="montre1" style="margin-top:-35px ; margin-left:50px" 

</pre>
<br />
<br />
<div class="montre4"></div>
<div class="montre1" style="margin-top:-35px ; margin-left:50px"> </div>

<br />
<br />

<h5>14- Montre6, application : le dernier qui parle a raison</h5>

<pre>


...sortie head entre dans body..

div class="montre1" style="margin-top:-35px ; margin-left:50px" 
div class="montre4"


</pre>

<br />
<br />

<div class="montre1" style="margin-top:-35px ; margin-left:50px"> </div>
<div class="montre4"></div>


<br />
<br />
<h5>15- Le positionement</h5>


<p>Nous pouvons posisioner les lettres sous différentes formes.<br />
Faire en sorte que la même lettre soit utile à plusieurs mots, ou qu'encore le même mot soit le noeud de plusieurs associations de mots.<br />Pour cela, nous allons définir une zone de travail dans laquelle nous placerons nos lettres et nos dessins.</p>
<pre>
.mon_humeur{
  width: 600px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 50px;
}

...sortie head entre dans body..

div class="mon_humeur"  

mes div des lettres et dessins
div class="montre4"
fermeture du div humeur
</pre>

<br />


<div class="mon_humeur"> 
<div class="montre4" style="margin-top:45px ; margin-left:50px"></div>
</div>
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
<h5>16- Première application</h5>


<p>Nous pouvons posisioner les lettres sous différentes formes.<br />
Faire en sorte que la même lettre soit utile à plusieurs mots, ou qu'encore le même mot soit le noeud de plusieurs associations de mots.<br />Pour cela, nous allons définir une zone de travail dans laquelle nous placerons nos lettres et nos dessins.</p>
<pre>
.boucle1{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.mon_humeur{
	position:absolute;
  width: 600px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 50px;
}

.sortie_droite{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

...sortie head entre dans body..

div class="mon_humeur"  

mes div des lettres et dessins
div class="mon_humeur"> 
div class="boucle1" style="margin-top:45px ; margin-left:50px">
div class="sortie_droite" style="margin-left:20px">
/div> /div> /div>
fermeture des 3 div humeur étant le dernier
</pre>

<br />
<br />

<div class="mon_humeur"> 


<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="sortie_droite" style="margin-left:20px">
<div class="entre_gauche" style="margin-left:20px">
<div class="entre_gauche" style="margin-left:20px">
<div class="entre_passe" style="margin-left:20px">
<div class="sortie_droite1" style="margin-left:20px">
</div></div></div></div></div></div>




<div class="boucle2" style="margin-top:-15px ; margin-left:150px">
<div class="montre4" style="margin-top:5px ; margin-left:-23px">
<div class="boucle2" style="margin-top:-15px ; margin-left:65px">
<div class="montre4" style="margin-top:-17px ; margin-left:-23px">
<div class="boucle3" style="margin-top:15px ; margin-left:55px">
<div class="boucle1" style="margin-left:35px">
<div class="montre7" style="margin-top:-17px ; margin-left:20px">
<div class="boucle4" style="margin-top: 17px ; margin-left:30px">
<div class="boucle3" style="margin-top: -1px ; margin-left:-1.5px">
<div class="boucle5" style="margin-top: -20px ; margin-left:30px">
<div class="boucle6" style=" margin-left:-6px">
<div class="boucle5" style="margin-top: 40px ; margin-left:0.2px">
<div class="boucle6" style=" margin-left:-6px">
</div></div></div></div></div> </div></div></div></div></div>   
</div></div></div>   


<div class="boucle7" style="margin-top:-25px ; margin-left:390px">
<div class="montre8" style="margin-top:-5px ; margin-left:-3px">
</div></div>

<div class="montre9" style="margin-top:-20px ; margin-left:420px">
<div class="boucle8" style="margin-top:-2px">
<div class="montre10" style="margin-top:20px ">
</div></div></div>

</div>

<br />
<br />
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
<br />
<br />
</body>

</html> 

Je vais y ajouter les mouvements et les sons, certainement dans la journée.
je place ça à cette adresse internet : http://www.letime.net/alpha/

Cordialement

#4 Re : -1 »  Projet alphabet css3 » Le 23/08/2015, à 16:47

temps
Réponses : 2

Bonjour,
Un petit up sur le projet pour savoir si certains ont commencé à créer des lettrines.
je viens d'ajouter aujourd'hui un peu d'explications, voici le code html5 css3.

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alphabet a l'usage des tux et des utilisateurs d'un langage multidirectionnel</title>

<style>


.arc_gauche{
  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;
}
.arc_double_droit{
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-left-radius: 40px;
  border-bottom-right-radius:40px; 
	margin-left: 50px;
}

.arc_double_couleur{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.petit_arc_double_couleur{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.trait_vertical{
	position:absolute;
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 


.penche60 {
    -webkit-transform: rotatex(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotatex(60deg);
    transform-style: preserve-3d;
} 

div#angle1 {
    -ms-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    transform: rotate(20deg); 
}

div#angle2 {
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}



.trait_penche{
	position:absolute;
  width: 3px;
  height: 40px;
    -webkit-transform: rotatex(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotatex(60deg);
    transform-style: preserve-3d;
	background-color: green;
	margin-left: 50px;
}

.trait_penche:active{
  margin-left:45px;
}

.trait_penche:hover {
  margin-left:85px;
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}



.montre1{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}


.montre2{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-left: 3px solid #CC6699;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.montre3{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.montre4{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}


.montre5{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}

.boucle1{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.mon_humeur{
	position:absolute;
  width: 798px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 1px;
}

.sortie_droite{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.entre_gauche{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-right: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:5px;
border-bottom-left-radius:20px;

}

.entre_passe{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:5px;
border-bottom-left-radius:20px;

}
.sortie_droite1{
	position:absolute;
  width: 20px;
  height: 18px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:1px;
border-top-right-radius:1px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 47px;
}
/*16 lettre 3*/


.boucle2{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}


.boucle3{
  width: 20px;
  height: 20px;
  border: 0px;
  border-top: 3px solid #4477FF;
  border-left: 3px solid #4477FF;
  border-bottom: 3px solid #4477FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:20px;

}

.montre7{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-left: 3px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle4{
	position:absolute;
  width: 20px;
  height: 10px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}

.boucle5{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-top: 3px solid #3366FF;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle6{
	position:absolute;
  width: 10px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;

}

.boucle7{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #800000;
  border-left: 3px solid #800000;
  border-top: 3px solid #800000;
  border-right: 3px solid #800000;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}

.montre8{
	position:absolute;
  width: 25px;
  height: 8px;
  border: 0px;
  border-bottom: 3px solid #800000;
border-top-left-radius:8px;
border-top-right-radius:25px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

}

.montre9{
	position:absolute;
  width: 20px;
  height: 42px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;

}

.boucle8{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;

  border-top: 3px solid #3366FF;
  border-right: 3px solid #3366FF;
border-top-left-radius:2px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:1px;
 margin-left:20px;

}
.boucle8:hover {
  margin-left:85px;
    -ms-transform: rotate(160deg); 
    -webkit-transform: rotate(160deg); 
    transform: rotate(160deg); 
}

.boucle8:active{
  margin-left:45px;
}




.montre10{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;

}

.mon_humeur1{
	position:absolute;
  width: 400px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 1px;
}

.trait_vertical1{
	position:absolute;
  width: 3px;
  height: 20px;

}
.trait_horizontal1{
	position:absolute;
  width: 20px;
  height: 3px;

}

.ennoir {
  background: black;  /* Standard */
} 

</style>

</head>

<body>
<p>J'ai grandis avec des coutumes multidirectionnelles, qui induisent des logiques multidirectionnelles.
<br />
Avec l'aire du numérique qui remplace l'analogique, j'ai vu les savoirs se perdre et même devenir incompréhensible car ne pouvant être perçue en utilisant une logique unidirectionnelle. Je pense que ceci est induit par le fait que les langages actuels sont tous unidirectionnels et que les langages par l'utilisations d'internet remplacent de plus en plus les contacts humains.
<br />
J'ai essayé de créer plusieurs techniques pour contrer cet effet. La création d'un alphabet css3, n'en est qu'une de plus.
<br /> <br />
Le but est de créer des effets en associant plusieurs causes, sens du terme, forme de lettre, mouvement de lettre, son différent de celui de la lettre attendue. L'effet final n'est que l'équilibre du tout et n'a de sens que dans le tout. Un langage multidirectionnel à la hauteur de l'homme en opposition aux langages unidirectionnels qui nous abaissent à la servilité des animaux.
<br /> Des millénaires d'évolution, perdus en une génération.</p>


<h1> alphabet css3</h1>
<h3>L'indentation, c'est le mal<br />
Ce n'est pas parce que les machines ne peuvent pas classer le contenue de nos échanges, <br />
que nous devons les abandonner, quitte à ne plus être référencé sur les moteurs de recherches</h3>

<p>
<h5>1- lettre c noire</h5>

<pre>

.arc_gauche{
  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;
}
...sortie head entre dans body..

div class="arc_gauche"

</pre>
<div class="arc_gauche"></div>

<h5>2- lettre j bleu</h5>

<pre>

.arc_double_droit{
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-left-radius: 40px;
  border-bottom-right-radius:40px; 
	margin-left: 50px;
}
...sortie head entre dans body..

div class="arc_double_droit"

</pre>
<div class="arc_double_droit"></div>


<h5>3- lettre o bicolore</h5>

<pre>

.arc_double_couleur{
  width: 20px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="arc_double_couleur"

</pre>
<div class="arc_double_couleur"></div>

<h5>4- lettre l bicolore</h5>

<pre>

.trait_vertical{
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 

...sortie head entre dans body..

div class="trait_vertical varie"

</pre>
<div class="trait_vertical varie"></div>

<br />
<br />
<h5>5- lettre composée en associations</h5>

<pre>

.petit_arc_double_couleur{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;
  border-right: 3px solid #CC6699;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.trait_vertical{
	position:absolute;
  width: 3px;
  height: 40px;
	margin-left: 50px;
}

.varie {
  background: -webkit-linear-gradient(180deg, #009999, #FF3300); /* pour Safari */
  background: -o-linear-gradient(180deg, #009999, #FF3300); /* pour Opera */
  background: -moz-linear-gradient(180deg, #009999, #FF3300); /* pour Firefox */
  background: linear-gradient(180deg, #009999, #FF3300); /* Standard */
} 

...sortie head entre dans body..
2 div pour ne pas mélanger les caractéristiques
En déplaçant à l'aide de top ou left on crée le q, le d, le b

div class="petit_arc_double_couleur"
div class="trait_vertical varie"

</pre>
<div class="petit_arc_double_couleur"></div>
<div class="trait_vertical varie"></div>


<br />
<br />
<h5>6- lettre composée en associations 2, le dernier qui parle a raison</h5>

<pre>

div class="petit_arc_double_couleur" style="margin-left:36px"
div class="trait_vertical varie"

</pre>
<div class="petit_arc_double_couleur" style="margin-left:36px"></div>
<div class="trait_vertical varie"></div>
<br />
<br />

<h5>7- l'héritage</h5>

<pre>
div class="penche60
div class="petit_arc_double_couleur" style="margin-left:36px"  fin div
div class="trait_vertical varie"  fin div
fin div donnant heritage
</pre>
<div class="penche60">

<div class="petit_arc_double_couleur" style="margin-left:36px"></div>
<div class="trait_vertical varie penche60"></div>

</div>

<br />
<br />





<h5>8- Mouvement en 2 temps, 1 au clique 5px vers la gauche, 2 au passage souris vers la droite <br />
En application pour que le mot se mette en forme qu'au clique de souris</h5>

<pre>
div class="trait_penche" onMouseDown=""
</pre>
<div class="trait_penche" onMouseDown="">


</div>



<br />
<br />


<h5>9- Montre1</h5>

<pre>

.montre1{
	position:absolute;
  width: 40px;
  height: 40px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre1"

</pre>
<div class="montre1"></div>

<br />
<br />


<h5>10- Montre2</h5>

<pre>

.montre2{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-left: 3px solid #CC6699;

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre2"

</pre>
<div class="montre2"></div>

<br />
<br />
<h5>11- Montre3</h5>

<pre>

.montre3{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-top: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre3"

</pre>
<div class="montre3"></div>

<br />
<br />
<h5>12- Montre4</h5>

<pre>

.montre4{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
...sortie head entre dans body..

div class="montre4"

</pre>
<div class="montre4"></div>
<br />
<br />
<h5>13- Montre5</h5>

<pre>


...sortie head entre dans body..

div class="montre4"
div class="montre1" style="margin-top:-35px ; margin-left:50px" 

</pre>
<br />
<br />
<div class="montre4"></div>
<div class="montre1" style="margin-top:-35px ; margin-left:50px"> </div>

<br />
<br />

<h5>14- Montre6, application : le dernier qui parle a raison</h5>

<pre>


...sortie head entre dans body..

div class="montre1" style="margin-top:-35px ; margin-left:50px" 
div class="montre4"


</pre>

<br />
<br />

<div class="montre1" style="margin-top:-35px ; margin-left:50px"> </div>
<div class="montre4"></div>


<br />
<br />
<h5>15- Le positionement</h5>


<p>Nous pouvons posisioner les lettres sous différentes formes.<br />
Faire en sorte que la même lettre soit utile à plusieurs mots, ou qu'encore le même mot soit le noeud de plusieurs associations de mots.<br />Pour cela, nous allons définir une zone de travail dans laquelle nous placerons nos lettres et nos dessins.</p>
<pre>
.mon_humeur{
  width: 600px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 50px;
}

...sortie head entre dans body..

div class="mon_humeur"  

mes div des lettres et dessins
div class="montre4"
fermeture du div humeur
</pre>

<br />


<div class="mon_humeur"> 
<div class="montre4" style="margin-top:45px ; margin-left:50px"></div>
</div>
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
<h5>16- Première application</h5>


<p>Nous pouvons posisioner les lettres sous différentes formes.<br />
Faire en sorte que la même lettre soit utile à plusieurs mots, ou qu'encore le même mot soit le noeud de plusieurs associations de mots.<br />Pour cela, nous allons définir une zone de travail dans laquelle nous placerons nos lettres et nos dessins.</p>
<pre>
.boucle1{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 3px solid #3366FF;
  border-left: 3px solid #CC6699;
  border-top: 3px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.mon_humeur{
	position:absolute;
  width: 600px;
  height: 200px;
	background-color: #F5FFFA;
	margin-left: 50px;
}

.sortie_droite{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-left: 3px solid #3366FF;
  border-bottom: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

...sortie head entre dans body..

div class="mon_humeur"  

mes div des lettres et dessins
div class="mon_humeur"> 
div class="boucle1" style="margin-top:45px ; margin-left:50px">
div class="sortie_droite" style="margin-left:20px">
/div> /div> /div>
fermeture des 3 div humeur étant le dernier.
Au passage de la souris ou au clique sur telle lettre, ou telle lettre,
les lettres vont s'assembler de telle manière ou de telle manière selon la lettre sélectionnée.
Nous pouvons faire aussi apparaitre de nouvelles lettres selon l'enchainement de clique.
ou bien même faire jouer tel son ou tel son.
</pre>

<br />
<br />

<div class="mon_humeur"> 


<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="sortie_droite" style="margin-left:20px">
<div class="entre_gauche" style="margin-left:20px">
<div class="entre_gauche" style="margin-left:20px">
<div class="entre_passe" style="margin-left:20px">
<div class="sortie_droite1" style="margin-left:20px">
</div></div></div></div></div></div>




<div class="boucle2" style="margin-top:-15px ; margin-left:150px">
<div class="montre4" style="margin-top:5px ; margin-left:-23px">
<div class="boucle2" style="margin-top:-15px ; margin-left:65px">
<div class="montre4" style="margin-top:-17px ; margin-left:-23px">
<div class="boucle3" style="margin-top:15px ; margin-left:55px">
<div class="boucle1" style="margin-left:35px">
<div class="montre7" style="margin-top:-17px ; margin-left:20px">
<div class="boucle4" style="margin-top: 17px ; margin-left:30px">
<div class="boucle3" style="margin-top: -1px ; margin-left:-1.5px">
<div class="boucle5" style="margin-top: -20px ; margin-left:30px">
<div class="boucle6" style=" margin-left:-6px">
<div class="boucle5" style="margin-top: 40px ; margin-left:0.2px">
<div class="boucle6" style=" margin-left:-6px">
</div></div></div></div></div> </div></div></div></div></div>   
</div></div></div>   


<div class="boucle7" style="margin-top:-25px ; margin-left:390px">
<div class="montre8" style="margin-top:-5px ; margin-left:-3px">
</div></div>

<div class="montre9" style="margin-top:-20px ; margin-left:420px">
<div class="boucle8" style="margin-top:-2px">
<div class="montre10" style="margin-top:20px ">
</div></div></div>

</div>

<br />
<br />
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
<h5>17- application baton simplifiée avec un trait horizontal et un trait vertical pour brique de construction</h5>

<pre>
div class="mon_humeur1" 


div class="trait_vertical1" style="margin-top:45px ; margin-left:50px ; background:black"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:20px"
div class="trait_horizontal1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_vertical1" style="background:black"
div class="trait_horizontal1" style="background:black; margin-top:20px"
div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px"
/div
/div
/div
/div
/div
/div
/div


div class="trait_vertical1" style="margin-top:45px ; margin-left:100px ; background:black"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:20px"
div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_horizontal1" style="background:black; margin-top:20px"
div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px"
/div
/div
/div
/div
/div
/div


div class="trait_vertical1" style="margin-top:45px ; margin-left:150px ; background:black"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:20px"
div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_vertical1" style="background:black; margin-left:20px"
/div
/div
/div
/div
/div


div class="trait_horizontal1" style="margin-top:45px ; margin-left:200px ; background:black"
div class="trait_vertical1" style="background:black; margin-left:10px"
div class="trait_horizontal1" style="background:black; margin-top:40px; margin-left:-20px"
div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px"
/div
/div
/div
/div


div class="trait_vertical1" style="margin-top:45px ; margin-left:250px ; background:black"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:20px"
div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_horizontal1" style="background:black; margin-top:20px"
div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px"
/div
/div
/div
/div
/div
/div


div class="trait_vertical1" style="margin-top:45px ; margin-left:300px ; background:black"
div class="trait_horizontal1" style="background:black; margin-top:40px"
div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-40px"
div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_vertical1" style="background:black; margin-left:20px"
/div
/div
/div
/div
/div


div class="trait_vertical1" style="margin-top:45px ; margin-left:350px ; background:black"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:20px"
div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px"
div class="trait_horizontal1" style="background:black"
div class="trait_vertical1" style="background:black; margin-left:15px"
/div
/div
/div
/div
/div
/div


/div
</pre>

<div class="mon_humeur1"> 


<div class="trait_vertical1" style="margin-top:45px ; margin-left:50px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_vertical1" style="background:black">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
<div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="trait_vertical1" style="margin-top:45px ; margin-left:100px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:20px">
<div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
<div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px">
</div>
</div>
</div>
</div>
</div>
</div>


<div class="trait_vertical1" style="margin-top:45px ; margin-left:150px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:20px">
<div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_vertical1" style="background:black; margin-left:20px">
</div>
</div>
</div>
</div>
</div>


<div class="trait_horizontal1" style="margin-top:45px ; margin-left:200px ; background:black">
<div class="trait_vertical1" style="background:black; margin-left:10px">
<div class="trait_horizontal1" style="background:black; margin-top:40px; margin-left:-20px">
<div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px">
</div>
</div>
</div>
</div>


<div class="trait_vertical1" style="margin-top:45px ; margin-left:250px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:20px">
<div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
<div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-20px">
</div>
</div>
</div>
</div>
</div>
</div>


<div class="trait_vertical1" style="margin-top:45px ; margin-left:300px ; background:black">
<div class="trait_horizontal1" style="background:black; margin-top:40px">
<div class="trait_vertical1" style="background:black; margin-left:20px; margin-top:-40px">
<div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_vertical1" style="background:black; margin-left:20px">
</div>
</div>
</div>
</div>
</div>


<div class="trait_vertical1" style="margin-top:45px ; margin-left:350px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:20px">
<div class="trait_vertical1" style="background:black; margin-top:20px; margin-left:-20px">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-left:15px">
</div>
</div>
</div>
</div>
</div>
</div>


</div>

<br />
<br />


<br />
<br />
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
<h5>18- baton simplifiée affiché au clique et explications de dévelopements humains (incompréhensible pour les machines et autres moteurs de recherches)</h5>


<p>
Selon la distance le texte est compréhensible seulement par l'esprit humain, ainsi il est aisé de mettre en forme une série de petites lettres, en prenant un peu de distance ces lettres créent une forme générale donnant le vrai texte.<br />
Nous pouvons aussi incorporer des décorations en forme de lettre sur le bord des lettres identifiées par l'esprit humain pour contrer d'éventuelles reconnaissances de formes. Nous pouvons Encore créer nos lettres en incorporant une partie possédant la couleur de fond du support, en exemple si la barre verticale de droite du O est de même couleur que le fond, il apparait un C à l'oeil.<br />
Nous pouvons créer des V en formes d'oiseaux, .... En d'autres mots, utiliser la logique multidirectionnelle de l'esprit humain pour augmenter la puissance de nos communications.<br />
Exemple au clique.
</p>

<div class="mon_humeur1"> 


<div class="trait_vertical1" style="margin-top:45px ; margin-left:50px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-top:20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
</div>
</div>
</div>
</div>



<div class="trait_vertical1" style="margin-top:45px ; margin-left:100px ; background:black">
<div class="trait_vertical1" style="background:black; margin-top:20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
</div>
</div>
</div>



<div class="trait_vertical1" style="margin-top:45px ; margin-left:150px ; background:black">
<div class="trait_vertical1" style="background:black; margin-top:20px">
</div>
</div>



<div class="trait_vertical1" style="margin-top:45px ; margin-left:180px ; background:black">
<div class="trait_horizontal1" style="background:black">
<div class="trait_vertical1" style="background:black; margin-top:20px">
<div class="trait_horizontal1" style="background:black; margin-top:20px">
</div>
</div>
</div>
</div>




</div>

<br />
<br />


<br />
<br />
<p>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br />
</p>
</body>

</html> 

Cordialement

#5 -1 »  Projet alphabet css3 » Le 17/07/2015, à 10:20

temps
Réponses : 2

Bonjour,
j'ai lancé pour projet de créer les instruments de musiques en css3 et l'alphabet en css3, de manière à ce que les tux puissent donner des sentiments à leurs courrier en bougeant les lettres de différentes manières.
En exemple sur les instruments de musique :
violon

guitare

saxo

bouche en construction

le but final est de créer une archive placée dans un git

les codes sont donnés en grande partie, dans un autre fil. Si quelqu'un cherche un retour de première expérience, je réponds dans le fil.

Exemple de y en forme baton.
les trois branches sont séparés pour pouvoir donner des mouvements différents à chacune d'entre elle

css3

.pied1 {
position:fixed;
margin-top: 23.9%;
margin-left: 50%;
    width: 0.9%;
    height: 5.2%;
    background: #c9c0bb;
}

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

.piedpencher2{
position:fixed;
margin-top: 20%;
margin-left: 51%;
    width: 0.9%;
    height: 5%;
    background: #c9c0bb;
	-webkit-transform:skew(150deg);
	-moz-transform:skew(150deg);
	-o-transform:skew(150deg);
	tranform:skew(150deg);
}

Cordialement

#6 Re : -1 »  menu css3 » Le 30/05/2015, à 14:16

temps
Réponses : 14

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

#7 Re : -1 »  menu css3 » Le 01/06/2015, à 12:42

temps
Réponses : 14

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

#8 Re : -1 »  menu css3 » Le 08/06/2015, à 15:47

temps
Réponses : 14

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

#9 Re : -1 »  menu css3 » Le 09/06/2015, à 20:13

temps
Réponses : 14

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

#10 Re : -1 »  menu css3 » Le 12/06/2015, à 05:52

temps
Réponses : 14

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

#11 Re : -1 »  menu css3 » Le 15/06/2015, à 05:48

temps
Réponses : 14

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

#12 Re : -1 »  menu css3 » Le 19/06/2015, à 16:03

temps
Réponses : 14

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

#13 Re : -1 »  menu css3 » Le 07/07/2015, à 06:12

temps
Réponses : 14

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

#14 Re : -1 »  menu css3 » Le 14/07/2015, à 16:59

temps
Réponses : 14

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

#15 Re : -1 »  menu css3 » Le 24/07/2015, à 21:28

temps
Réponses : 14

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

#16 Re : -1 »  menu css3 » Le 25/06/2015, à 23:46

temps
Réponses : 14

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> 

#17 Re : -1 »  Création d'une introduction en 2D » Le 19/07/2015, à 15:24

temps
Réponses : 4

Bonjour,
Il y a de nombreuses techniques pour arriver à ce type d'effet.
Je pense que pour le débutant la plus simple est celle de kino (application nunux).
Acte 1 : dessiner ses images avec gimp
Acte 2 : assembler les images avec kino
Acte 3 : encoder les images dans un format actuel avec ffmpeg

Il est aussi possible d'assembler les image en film en html5 et ensuite d'enregistrer avec recormydesktop, c'est la technique que j'utilise, mais cette technique est plus compliquée.

Les modèles donnés sont bien en dessous de ce qu'il est possible de réaliser.

Je précise que si c'est du simple défilement ou jeux de textes en différentes lettrine, cette fonction est déjà inclue dans kino.

Cordialement

#18 Re : -1 »  VOXGenerator » Le 31/05/2015, à 14:48

temps
Réponses : 11

Bonjour,
Puis-je connaître le poids totale de l'application ?
Est-ce que celle-ci est en ko et sans sources externes ?

Je pose cette question, car avec un peu de temps, c'est ce que je peux réaliser.
Cordialement

#19 Re : -1 »  VOXGenerator » Le 31/05/2015, à 21:52

temps
Réponses : 11

Merci pour la réponse. J'ai créé il y a plusieurs année un lecteur de texte qui pesait quelques ko, mais mes travaux ne m'ont apporté que des insultes. Aussi, j'ai arrêté de travailler sur ce projet, pour basculer sur un autre projet que j'espérai plus porteur. J'écris la consonne "b" avec 2 octets, j'ai même fait une émission de radio à l'époque. Cela fait plus de 5 ans que j'ai créé mon propre format audio, et sincèrement je veux aider par principe même si je pense que c'est un programme incohérent.
En plus simple, j'aurai bien voulu accorder une journée au projet présenté pour aider, mais à la vue du poids des codes, je pense que c'est impossible en si peu de temps.

Cordialement

#20 Re : -1 »  VOXGenerator » Le 01/06/2015, à 08:20

temps
Réponses : 11

Bonjour,
J'espère sincèrement que tu vas trouver des DEV pour t'aider sur ce projet.
Concernant la reconnaissance vocale et la lecture automatique,
je pense que dès que j'ai mis au point une version finale de la BAUL,
ces fonctions découleront d'elles-mêmes, et il est fort probable que mon projet soit finit avant VOXGenerator
Le top serait d'avoir le choix avec plusieurs techniques possibles.
Il ne faut pas se trompé, à une époque, j'ai passé plusieurs semaines à travailler en alternance sur mon projet et des outils cités dans VOXGenerator.
Cordialement

#21 -1 »  Petit jeu de piano sur le son m » Le 26/06/2015, à 23:11

temps
Réponses : 0

Bonjour,
Je viens d'ajouter ce soir un piano de plus qui génère le son "ma"
http://www.letime.net/PianoBaul/zone3/

La particularité de ce m, c'est que je le fait sortir de la matière, ainsi en augmentant les durées des premières notes, il apparaît un bong. Et selon comment on joue les notes, le "m" devient un "n" ou disparaît.

Je trouve ce piano assez fun, retour attendu si ça plaît.

Attention peut-être que mon serveur commence à être assez sollicité, une petite attente d'une seconde ou + en téléchargement des notes est apparue

J'ai fait aussi une petite vidéo de démo ici :
vidéo de démonstration

Et l'application est en téléchargement ici
Application en téléchargement

Pour utiliser l'application, il faut décompresser le téléchargement, compiler avec la ligne donnée dans le main, récupérer l’exécutable créé ainsi, avec le fichier fronts.txt qui sert à sélectionner le piano généré, et le fichier index.html
Ensuite il faut créer des répertoire de travail vide dans lesquelles placer les trois fichiers utiles à la générations des pianos.

Cordialement

P.S.

Toujours dans le même style J'ai généré dans le piano consonnes en folies, la forme du son "D" suivit de la forme du son "O". Je fais varier ces 2 formes en durée selon la gamme, et j’ajoute devant une petite série de fronts fixes à 28/44100
Le résultat est une variation de voyelles et de consonnes.
vidéo

Le piano en HTML5 consonnes en folies

#22 Re : -1 »  Compression et minify pour CSS et JS » Le 16/06/2015, à 04:38

temps
Réponses : 4

Bonjour,
Je pense que c'est inutile.
Voir le paramétrage du serveur et étudier .htaccess ou à htaccess compression code ubuntu

Cordialement

#23 -1 »  Comment placer une variable javascript dans une balise » Le 29/05/2015, à 13:50

temps
Réponses : 3

Bonjour,
J'ai un code HTML qui fait varier une variable à l'aide d'un bouton.
Je cherche comment placer la variable dans la balise src= d'un div
variable javascript
src en html5
Cordialement

#24 Re : -1 »  Comment placer une variable javascript dans une balise » Le 30/05/2015, à 19:45

temps
Réponses : 3

Bonjour,
Merci pour la réponse.
Je vais tester.
Pour plus de précision, c'est un fichier audio  (144 fichiers audio en tout) qui est derrière les src
En fait je voulais au clique bouton, changer les fichiers audio et recharger la page. Mais après avoir posté, j'ai tout simplement créer une nouvelle page contenant les fichiers audio et navigue par liens entre les pages.

J'ai laissé ce fil ouvert, car je pense que cette information est importante. Il existe un O.S. qui a une balise spéciale html pour ça. Et je voulais trouver une technique html qui le fasse sous linux.

Cordialement