L'interactivité peut avoir différentes formes.
Elle peut-être différenciée par le but recherché ou par la forme qu'elle prend.
En fait, il est aussi bien possible de construire des constructions complexes, en changeant les positions dans la vidéo, ou le changement de vidéo, ou le changement de vitesse, ou le changement du contenue de l'image, ou l'ajout d'éléments ...
la vrai question est : est-ce que nous voulons créer un exercide pédagogique ou un jeu vidéo ludique ou encore autre chose
Le tutoriel fait le choix de passer par l'exemple
Le fait de cliquer sur une zone précise de l'écran ou sur une touche clavier, ou encore de survoler au curseur une image se nomme un événement.
Nous attachons dans une ou des images du body le lancement de ce qui se nomme une fonction quand tel ou tel événement se produit
la fonction va donner un ordre comme passer de la vidéo 1 à la vidéo 2, ou encore accélérer le défilement, ou encore se rendre à telle image de telle vidéo, ou encore ajouter un dessin ...
Au clique de la souris c'est
onMouseDown=
Pour lancer une action, celle de la fonction action1Press c'est
onMouseDown="action1Press();".
exemple 1 ralentir la vitesse en changeant la valeur :
function acelereLeVent(){
if(vitesseDuVent>123){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
}
}.
.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre du dessin animé interactif</title>
<script>
var persistanceretinienne = 7;
var nbimg = null;
var nbboucle = 70;
var mua1 = 0;
var vitesseDuVent = 220;
var ouioui;
var joueur = 'fleur';
var joueur1;
var joueur2;
var version = 1;
var joueur3 = 'tweefleur';
var joueur4;
var joueur5 = 'twee';
var joueur7;
var joueur8;
var joueur9 = 'drie';
var joueur10 = 'vier';
var joueur11;
var joueur12;
var joueur13;
var joueur14;
function acelereLeVent(){
if(vitesseDuVent>123){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
}
}
function diminuLeVent(){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
function decoupe2(joueur4){//1
document.getElementById(joueur4).className = 'cachemoi';
}//3
function decoupe1(joueur2){//1
document.getElementById(joueur2).className = 'cachemoi';
}//3
function decoupe3(joueur1){//1
document.getElementById(joueur1).className = 'sortdutrou';
}//3
function restecalme(joueur1,joueur8,joueur11,joueur12,ouioui){//1
if(version == 1){//2
for (var placier = 1; placier < ouioui; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 9; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = 1; placier < ouioui; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 9; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
document.getElementById(joueur1).className = 'sortdutrou';
document.getElementById(joueur8).className = 'cachemoi';
}//2
if(version == 2){//2
for (var placier = 1; placier < ouioui; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 9; placier++) {//3
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}//3
for (var placier = 1; placier < ouioui; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
for (var placier = ouioui+1; placier < 9; placier++) {//3
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}//3
document.getElementById(joueur8).className = 'sortdutrou';
document.getElementById(joueur1).className = 'cachemoi';
}
/*************/
if(version == 3){
for (var placier = 1; placier < ouioui; placier++) {
joueur13 = joueur9 + placier;
document.getElementById(joueur13).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 9; placier++) {
joueur13 = joueur9 + placier;
document.getElementById(joueur13).className = 'cachemoi';
}
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 9; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
document.getElementById(joueur9).className = 'sortdutrou';
document.getElementById(joueur8).className = 'cachemoi';
document.getElementById(joueur1).className = 'cachemoi';
}
/*****/
if(version == 4){
for (var placier = 1; placier < ouioui; placier++) {
joueur14 = joueur10 + placier;
document.getElementById(joueur14).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 9; placier++) {
joueur14 = joueur10 + placier;
document.getElementById(joueur14).className = 'cachemoi';
}
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 9; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
document.getElementById(joueur10).className = 'sortdutrou';
document.getElementById(joueur9).className = 'cachemoi';
document.getElementById(joueur8).className = 'cachemoi';
document.getElementById(joueur1).className = 'cachemoi';
}
/********/
}
function change(persistanceretinienne)
{
switch (persistanceretinienne) {
case 0:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon17();
break;
case 1:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon13();
break;
case 2:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon9();
break;
case 3:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon26();
break;
case 4:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon25();
break;
case 5:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon2();
break;
case 6:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon24();
break;
case 7:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
joueur11 = joueur9 + ouioui;
joueur12 = joueur10 + ouioui;
restecalme(joueur1,joueur8,joueur11,joueur12,ouioui);
JoueLeSon23();
break;
}
}
function durermax()
{
clearInterval(nbimg);
/* lancerChange4(); */
}
function seance()
{
change(persistanceretinienne);
persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{
/* selection du nombre d'image*/
/* persistanceretinienne = 3;*/
persistanceretinienne = 7;
nbboucle = nbboucle-1;
}
}
function lancertout()
{
nbimg = setInterval(seance, vitesseDuVent);
setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne)
}
function JoueLeSon(mua1){
if(mua1==0){
var multia1 = document.getElementById("23awav");
multia1.play();
}
else if(mua1==1){
var multia2 = document.getElementById("20awav");
multia2.play();
}
else if(mua1==2){
var multia3 = document.getElementById("21awav");
multia3.play();
}
else if(mua1==3){
var multia4 = document.getElementById("22awav");
multia4.play();
}
}
function JoueLeSon1(){
var multib1 = document.getElementById("24awav");
multib1.play();
}
function JoueLeSon2(){
var multic1 = document.getElementById("25awav");
multic1.play();
}
function JoueLeSon3(){
var multic1 = document.getElementById("26awav");
multic1.play();
}
function JoueLeSon4(){
var multic1 = document.getElementById("27awav");
multic1.play();
}
function JoueLeSon5(){
var multic1 = document.getElementById("28awav");
multic1.play();
}
function JoueLeSon6(){
var multic1 = document.getElementById("29awav");
multic1.play();
}
function JoueLeSon7(){
var multic1 = document.getElementById("30awav");
multic1.play();
}
function JoueLeSon8(){
var multic1 = document.getElementById("31awav");
multic1.play();
}
function JoueLeSon9(){
var multic1 = document.getElementById("32awav");
multic1.play();
}
function JoueLeSon10(){
var multic1 = document.getElementById("33awav");
multic1.play();
}
function JoueLeSon11(){
var multic1 = document.getElementById("34awav");
multic1.play();
}
function JoueLeSon12(){
var multic1 = document.getElementById("35awav");
multic1.play();
}
function JoueLeSon13(){
var multic1 = document.getElementById("36awav");
multic1.play();
}
function JoueLeSon14(){
var multic1 = document.getElementById("37awav");
multic1.play();
}
function JoueLeSon15(){
var multic1 = document.getElementById("38awav");
multic1.play();
}
function JoueLeSon16(){
var multic1 = document.getElementById("39awav");
multic1.play();
}
function JoueLeSon20(){
var multic1 = document.getElementById("40awav");
multic1.play();
}
function JoueLeSon21(){
var multic1 = document.getElementById("41awav");
multic1.play();
}
function JoueLeSon22(){
var multic1 = document.getElementById("42awav");
multic1.play();
}
function JoueLeSon23(){
var multic1 = document.getElementById("43awav");
multic1.play();
}
function JoueLeSon24(){
var multic1 = document.getElementById("44awav");
multic1.play();
}
function JoueLeSon25(){
var multic1 = document.getElementById("45awav");
multic1.play();
}
function JoueLeSon26(){
var multic1 = document.getElementById("46awav");
multic1.play();
}
function JoueLeSon27(){
var multic1 = document.getElementById("47awav");
multic1.play();
}
function JoueLeSon17(){
var multic1 = document.getElementById("20awav");
multic1.play();
}
function JoueLeSon18(){
var multic1 = document.getElementById("21awav");
multic1.play();
}
function JoueLeSon19(){
var multic1 = document.getElementById("22awav");
multic1.play();
}
function action1Press(){
version = version + 1;
if(version>4){
version = 1;
}
}
</script>
<style>
body {
position: absolute;
margin-left: 200px;
margin-top: 150px;
}
.petales1 {
position: absolute;
width: 130px;
height: 50px;
border-radius: 250px 25px;
opacity:0.5;
border-width: 75px 22px 0;
border-style: solid;
border-color: #CCCCFF transparent;
}
.petales2 {
position: absolute;
width: 130px;
height: 50px;
border-radius: 250px 25px;
opacity:0.5;
background-color: #b0c4de;
}
.petales3 {
position: absolute;
width: 130px;
height: 50px;
border-radius: 250px 25px;
opacity:0.5;
background-color: #b0c4de;
}
.petales4 {
position: absolute;
width: 130px;
height: 50px;
border-radius: 250px 25px;
}
.petales5 {
position: absolute;
width: 130px;
height: 50px;
border-radius: 250px 25px;
background-color: red;
-webkit-animation-name: bouge1;
-webkit-animation-duration: 0.4s;
animation-name: bouge1;
animation-duration: 0.4s;
}
.petales6 {
position: absolute;
display:block;
width: 126px;
height: 180px;
background-color: #FF9999;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/*
@-webkit-keyframes bouge1 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}*/
@keyframes bouge1 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.tourne15 {
float: left;
-ms-transform: rotate(15deg); /* IE 9 */
-webkit-transform: rotate(15deg); /* Safari */
transform: rotate(15deg);
}
.tourne30 {
float: left;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg);
}
.tourne45 {
float: left;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
.tourne60 {
float: left;
-ms-transform: rotate(60deg); /* IE 9 */
-webkit-transform: rotate(60deg); /* Safari */
transform: rotate(60deg);
}
.tourne75 {
float: left;
-ms-transform: rotate(75deg); /* IE 9 */
-webkit-transform: rotate(75deg); /* Safari */
transform: rotate(75deg);
}
.tourne90 {
float: left;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.tourne105 {
float: left;
-ms-transform: rotate(105deg); /* IE 9 */
-webkit-transform: rotate(105deg); /* Safari */
transform: rotate(105deg);
}
.tourne120 {
float: left;
-ms-transform: rotate(120deg); /* IE 9 */
-webkit-transform: rotate(120deg); /* Safari */
transform: rotate(120deg);
}
.tourne135 {
float: left;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Safari */
transform: rotate(135deg);
}
.tourne150 {
float: left;
-ms-transform: rotate(150deg); /* IE 9 */
-webkit-transform: rotate(150deg); /* Safari */
transform: rotate(150deg);
}
.tourne165 {
float: left;
-ms-transform: rotate(165deg); /* IE 9 */
-webkit-transform: rotate(165deg); /* Safari */
transform: rotate(165deg);
}
.tourne180 {
float: left;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
.tourne165m {
float: left;
-ms-transform: rotate(-165deg); /* IE 9 */
-webkit-transform: rotate(-165deg); /* Safari */
transform: rotate(-165deg);
}
.tourne150m {
float: left;
-ms-transform: rotate(-150deg); /* IE 9 */
-webkit-transform: rotate(-150deg); /* Safari */
transform: rotate(-150deg);
}
.tourne135m {
float: left;
-ms-transform: rotate(-135deg); /* IE 9 */
-webkit-transform: rotate(-135deg); /* Safari */
transform: rotate(-135deg);
}
.tourne120m {
float: left;
-ms-transform: rotate(-120deg); /* IE 9 */
-webkit-transform: rotate(-120deg); /* Safari */
transform: rotate(-120deg);
}
.tourne105m {
float: left;
-ms-transform: rotate(-105deg); /* IE 9 */
-webkit-transform: rotate(-105deg); /* Safari */
transform: rotate(-105deg);
}
.tourne90m {
float: left;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg);
}
.tourne75m {
float: left;
-ms-transform: rotate(-75deg); /* IE 9 */
-webkit-transform: rotate(-75deg); /* Safari */
transform: rotate(-75deg);
}
.tourne60m {
float: left;
-ms-transform: rotate(-60deg); /* IE 9 */
-webkit-transform: rotate(-60deg); /* Safari */
transform: rotate(-60deg);
}
.tourne45m {
float: left;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Safari */
transform: rotate(-45deg);
}
.tourne30m {
float: left;
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg);
}
.tourne15m {
float: left;
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Safari */
transform: rotate(-15deg);
}
.tourne5 {
float: left;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Safari */
transform: rotate(5deg);
}
.tourne10 {
float: left;
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari */
transform: rotate(10deg);
}
.letout {
}
.corps{
position: absolute;
margin-top:0px;
margin-left:0px;
width:500px;
height:500px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid black;
}
.corps::after{
content:'';
position: absolute;
margin-top:-100px;
margin-left:50px;
display:block;
width:400px;
height:250px;
background:black;
-webkit-border-radius: 50% 50% 20% 20% / 50% 50% 20% 20%;
border-radius: 50% 50% 20% 20% / 50% 50% 20% 20%;
border:2px solid black;
}
.oeil_droit {
left: 260px;
top: -10px;
position: absolute;
height: 135px;
width: 100px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.oeil_gauche {
left: 110px;
top: -50px;
position: absolute;
height: 180px;
width: 150px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.oeil_droitpupille {
left: 5px;
top:40px;
position: absolute;
height: 60px;
width: 30px;
background-color: black;
border-radius: 100% 100% 100% 100%
}
.oeil_gauchepupille {
left: 110px;
top: 65px;
position: absolute;
height: 70px;
width: 35px;
background-color: black;
border-radius: 100% 100% 100% 100%
}
.reflet_droit {
left: 12px;
top: 2px;
position: absolute;
height: 20px;
width: 17px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.reflet_gauche {
left: 11px;
top: 2px;
position: absolute;
height: 35px;
width: 17px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.lebec {
position: absolute;
margin-left: 245px;
margin-top: 35px;
left: -60px;
top: 110px;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid orange;
}
.lebecplus {
position: absolute;
margin-left: 245px;
margin-top: 35px;
left: -60px;
top: 100px;
width:120px;
height:20px;
background:orange;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.aile_gauche {
position: absolute;
margin-left: 280px;
left: -380px;
top: 100px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
width: 180px;
height: 90px;
background: black;
}
.aile_gauche:active{
-webkit-transform:perspective(13px) rotatey(-6deg);
transform:perspective(13px) rotatey(-6deg);
margin-top:205px;
}
.aile_droite {
position: absolute;
margin-left: 260px;
left: 190px;
top: 100px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
width: 180px;
height: 90px;
background: black;
}
.aile_droite:active{
-webkit-transform:perspective(13px) rotatey(-6deg);
transform:perspective(13px) rotatey(-6deg);
margin-top:205px;
}
.ventre {
left: 75px;
top: 100px;
position: absolute;
width:350px;
height:400px;
border-radius: 50% 50% 50% 50%;
background-color: white;
text-align: center;
/* color="#0066FF";*/
background: #ffffb3;
font-size: xx-large;
}
.pied_gauche {
position: absolute;
left: 360px;
top: 420px;
height:90px;
width:180px;
border-radius: 90px 90px 10px 10px;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:orange;
}
.pied_droit {
position: absolute;
left: 80px;
top: 420px;
height:90px;
width:180px;
border-radius: 90px 90px 10px 10px;
-moz-border-radius: 90px 90px 10px 10px;
-webkit-border-radius: 90px 90px 10px 10px;
background:orange;
}
.pied_droit:active{
background-color: black;
}
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);
}
.indique{
cursor:pointer;
}
.cachemoi {
display: none;
}
.sortdutrou {
display: inline;
}
.bergeretete{
position: absolute;
margin-top:50px;
margin-left:25px;
width:100px;
height:100px;
background:#800000;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.bergerecapuche{
position: absolute;
margin-top:35px;
margin-left:0px;
width:150px;
height:150px;
background:#ff6600;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.bergerevisage{
position: absolute;
margin-top:1px;
margin-left:27px;
width:50px;
height:96px;
background:#ffe5e5;;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.bergereoeil {
position: absolute;
margin-top:25px;
width:20px;
height:31px;
background:white;
-webkit-border-radius:7px / 20px;
-moz-border-radius:7px / 20px;
-o-border-radius:7px / 20px;
border-radius:7px / 20px;
}
.bergerepupille{
position: absolute;
margin-top:15px;
margin-left:8px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.bergerecorps{
position: absolute;
border-bottom: 100px solid #ff6600;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
height: 0;
width: 100px;
margin-top:165px;
margin-left:-15px;
}
.bergerejambe {
position: absolute;
width: 140px;
height: 15px;
background: #ff6600;
margin-top: 265px;
margin-left: 6px;
}
.bergerepied {
position: absolute;
width: 65px;
height: 4px;
background: #800000;
margin-top: 280px;
margin-left: 6px;
}
.bergereveste {
position: absolute;
width: 3px;
height: 65px;
background: #800000;
margin-top: 200px;
}
.bergeremaind{
position: absolute;
margin-top:245px;
margin-left:140px;
width:30px;
height:30px;
background:#800000;
border-radius: 100% 100% 100% 100%
}
bergeremaind:active{
background:white;
}
.bergeremaing{
position: absolute;
margin-top:245px;
margin-left:-17px;
width:30px;
height:30px;
background:#800000;
border-radius: 100% 100% 100% 100%
}
bergeremaing:active{
background:white;
}
.dominiquereverbonnet{
width: 150px;
height: 60px;
border: 0px;
border-top: 20px solid red;
border-top-left-radius: 70px;
border-top-right-radius:70px;
margin-top: -5px
}
.dominiquetete{
position: absolute;
margin-top:35px;
margin-left:0px;
width:150px;
height:150px;
background:#ffe5e5;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid #ffe5e5;
}
.dominiquepompon{
position: absolute;
margin-top:-5px;
margin-left:68px;
width:25px;
height:25px;
background:red;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.dominiquebonnet{
position: absolute;
margin-top:0px;
margin-left:0px;
width:150px;
height:150px;
background:blue;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid blue;
}
.dominiqueoeild {
left: 86px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.dominiqueoeilg {
left: 36px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.dominiquepupilled{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.dominiquepupilleg{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.dominiquebouche{
position: absolute;
width: 35px;
height: 10px;
border: 0px;
border-top: 4px solid #ff6666;
border-top-left-radius: 30px;
border-top-right-radius:30px;
margin-left: 60px;
}
.dominiquejambe {
position: absolute;
width: 70px;
height: 50px;
background: blue;
margin-top: 315px;
margin-left: 40px;
}
.dominiquepied {
position: absolute;
width: 80px;
height: 3px;
background: black;
margin-top: 47px;
margin-left: -5px;
}
.dominiquecorps{
position: absolute;
display:block;
width: 156px;
height: 180px;
background-color: #cc3300;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 160px;
margin-left: -5px;
}
.dominiquecasquette{
position: absolute;
width:63px;
height:1px;
border:50px solid green;
border-color:green transparent transparent transparent;
border-bottom:70px;
}
.dominiqueveste {
position: absolute;
width: 3px;
height: 120px;
background: black;
margin-top: 40px;
margin-left: 78px;
}
.dominiquepoche {
position: absolute;
margin-top:25px;
margin-left:-10px;
width:25px;
height:25px;
border:3px solid green;
border-color:transparent green green green;
}
.dominiquemaind{
position: absolute;
margin-top:105px;
margin-left:126px;
width:30px;
height:30px;
background:green;
border-radius: 100% 100% 100% 100%
}
dominiquemaind:active{
background:white;
}
.dominiquemaing{
position: absolute;
margin-top:105px;
margin-left:0px;
width:30px;
height:30px;
background:green;
border-radius: 100% 100% 100% 100%
}
dominiquemaing:active{
background:white;
}
.jefreverbonnet{
width: 300px;
height: 60px;
border: 0px;
border-top: 20px solid yellow;
border-top-left-radius: 70px;
border-top-right-radius:70px;
margin-top: -5px
}
.jeftete{
position: absolute;
margin-top:35px;
margin-left:0px;
width:300px;
height:150px;
background:#ffe5e5;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid #ffe5e5;
}
.jefpompon{
position: absolute;
margin-top:-5px;
margin-left:118px;
width:50px;
height:25px;
background:yellow;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.jefbonnet{
position: absolute;
margin-top:0px;
margin-left:0px;
width:300px;
height:150px;
background:blue;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid blue;
}
.jefoeild {
left: 86px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.jefoeilg {
left: 36px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.jefpupilled{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.jefpupilleg{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.jefbouche{
position: absolute;
width: 60px;
height: 10px;
border: 0px;
border-top: 20px solid black;
border-top-left-radius: 20px;
border-top-right-radius:20px;
margin-top: 15px;
margin-left: 60px;
}
.jefjambe {
position: absolute;
width: 140px;
height: 50px;
background: blue;
margin-top: 315px;
margin-left: 80px;
}
.jefpied {
position: absolute;
width: 160px;
height: 3px;
background: black;
margin-top: 47px;
margin-left: -5px;
}
.jefcorps{
position: absolute;
display:block;
width: 312px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 160px;
margin-left: -5px;
}
/*
.jefcorps::after{
content:'';
position: absolute;
position: absolute;
display:block;
width: 156px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 160px;
margin-left: -5px;
}
*/
.jefveste {
position: absolute;
width: 3px;
height: 120px;
background: black;
margin-top: 40px;
margin-left: 78px;
}
.jefbouton1 {
position: absolute;
margin-top:25px;
margin-left:-10px;
width:4px;
height:4px;
background:black;
border-radius: 100% 100% 100% 100%
}
.jefmaind{
position: absolute;
margin-top:105px;
margin-left:250px;
width:60px;
height:30px;
background:yellow;
border-radius: 100% 100% 100% 100%
}
jefmaind:active{
background:white;
}
.jefmaing{
position: absolute;
margin-top:105px;
margin-left:0px;
width:60px;
height:30px;
background:yellow;
border-radius: 100% 100% 100% 100%
}
jefmaing:active{
background:white;
}
.nicolasreverbonnet{
width: 150px;
height: 60px;
border: 0px;
border-top: 20px solid red;
border-top-left-radius: 70px;
border-top-right-radius:70px;
margin-top: -5px
}
.nicolastete{
position: absolute;
margin-top:35px;
margin-left:0px;
width:150px;
height:150px;
background:#ffe5e5;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid #ffe5e5;
}
.nicolaspompon{
position: absolute;
margin-top:-5px;
margin-left:68px;
width:25px;
height:25px;
background:red;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.nicolasbonnet{
position: absolute;
margin-top:0px;
margin-left:0px;
width:150px;
height:150px;
background:blue;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
border:2px solid blue;
}
.nicolasoeild {
left: 86px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.nicolasoeilg {
left: 36px;
top: 15px;
position: absolute;
height: 60px;
width: 33px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.nicolaspupilled{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.nicolaspupilleg{
position: absolute;
margin-top:25px;
margin-left:10px;
width:4px;
height:4px;
background:black;
-webkit-border-radius:50% / 50%;
-moz-border-radius:50% / 50%;
-o-border-radius:50% / 50%;
border-radius:50% / 50%;
}
.nicolasbouche{
position: absolute;
width: 30px;
height: 10px;
border: 0px;
border-top: 20px solid black;
border-top-left-radius: 20px;
border-top-right-radius:20px;
margin-top: 15px;
margin-left: 60px;
}
.nicolasjambe {
position: absolute;
width: 70px;
height: 50px;
background: blue;
margin-top: 315px;
margin-left: 40px;
}
.nicolaspied {
position: absolute;
width: 80px;
height: 3px;
background: black;
margin-top: 47px;
margin-left: -5px;
}
.nicolascorps{
position: absolute;
display:block;
width: 156px;
height: 180px;
background-color: #993333;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 160px;
margin-left: -5px;
}
/*
.nicolascorps::after{
content:'';
position: absolute;
position: absolute;
display:block;
width: 156px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
margin-top: 160px;
margin-left: -5px;
}
*/
.nicolasveste {
position: absolute;
width: 3px;
height: 120px;
background: black;
margin-top: 40px;
margin-left: 78px;
}
.nicolasbouton1 {
position: absolute;
margin-top:25px;
margin-left:-10px;
width:4px;
height:4px;
background:black;
border-radius: 100% 100% 100% 100%
}
.nicolasmaind{
position: absolute;
margin-top:105px;
margin-left:126px;
width:30px;
height:30px;
background:#ffe5e5;
border-radius: 100% 100% 100% 100%
}
nicolasmaind:active{
background:white;
}
.nicolasmaing{
position: absolute;
margin-top:105px;
margin-left:0px;
width:30px;
height:30px;
background:#ffe5e5;
border-radius: 100% 100% 100% 100%
}
nicolasmaing:active{
background:white;
}
.tete {
position: absolute;
width: 50px;
height: 60px;
background: #ff9999;
-webkit-border-radius: 25px / 30px;
-moz-border-radius: 25px / 30px;
border-radius: 25px / 30px;
}
.corpsf{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 50px;
height: 180px;
background: #ff9999;
-webkit-border-radius:25px / 90px;
-moz-border-radius:25px / 90px;
-o-border-radius:25px / 90px;
border-radius:25px / 90px;
}
.cuisse_g{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 40px;
height: 120px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
}
.cuisse_d{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 40px;
height: 120px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
border-top: 1.5px dotted #ffcccc;
border-right: 1.5px dotted #ffcccc;
border-bottom: 1.5px dotted #ffcccc;
border-left: 1.5px dotted #ffcccc;
}
.molet_g{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 30px;
height: 120px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
}
.molet_d{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 30px;
height: 120px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
border-right: 1.5px dotted #ffcccc;
border-bottom: 1.5px dotted #ffcccc;
border-left: 1.5px dotted #ffcccc;
}
.bras_g{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 40px;
height: 100px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
}
.bras_d{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 40px;
height: 100px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
border-top: 1.5px dotted #ffcccc;
border-right: 1.5px dotted #ffcccc;
border-bottom: 1.5px dotted #ffcccc;
border-left: 1.5px dotted #ffcccc;
}
.a_bras_g{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 30px;
height: 90px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
}
.a_bras_d{
position: absolute;
margin-top:0px;
margin-left:0px;
width: 30px;
height: 90px;
background: #ff9999;
-webkit-border-radius:20px / 60px;
-moz-border-radius:20px / 60px;
-o-border-radius:20px / 60px;
border-radius:20px / 60px;
border-top: 1.5px dotted #ffcccc;
border-right: 1.5px dotted #ffcccc;
border-bottom: 1.5px dotted #ffcccc;
border-left: 1.5px dotted #ffcccc;
}
.pied_gauchef {
position: absolute;
width: 36px;
height: 15px;
background: #ff9999;
-webkit-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
-moz-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
}
.pied_droitf {
position: absolute;
width: 36px;
height: 15px;
background: #ff9999;
-webkit-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
-moz-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
}
.pied_droitf:active{
background-color: black;
}
.pied_droitfp {
position: absolute;
width: 27px;
height: 15px;
background: #ff9999;
-webkit-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
-moz-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
}
.pied_droitfpf {
position: absolute;
width: 9px;
height: 8px;
background: #ff9999;
-webkit-border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
-moz-border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
}
.pied_gaucheffp {
position: absolute;
width: 27px;
height: 15px;
background: #ff9999;
-webkit-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
-moz-border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
border-radius:
10px 75px 10px 10px / 10px 30px 10px 10px;
}
.pied_gaucheffpf {
position: absolute;
width: 9px;
height: 8px;
background: #ff9999;
-webkit-border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
-moz-border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
border-radius:
2.5px 20px 2.5px 2.5px / 2.5px 8px 2.5px 2.5px;
}
.tourne5 {
float: left;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Safari */
transform: rotate(5deg);
}
.tourne10 {
float: left;
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari */
transform: rotate(10deg);
}
.tourne20m {
float: left;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
.tourne70 {
float: left;
-ms-transform: rotate(70deg); /* IE 9 */
-webkit-transform: rotate(70deg); /* Safari */
transform: rotate(70deg);
}
.tourne70m {
float: left;
-ms-transform: rotate(-70deg); /* IE 9 */
-webkit-transform: rotate(-70deg); /* Safari */
transform: rotate(-70deg);
}
.tourne18 {
float: left;
-ms-transform: rotate(18deg); /* IE 9 */
-webkit-transform: rotate(18deg); /* Safari */
transform: rotate(18deg);
}
.tourne42 {
float: left;
-ms-transform: rotate(42deg); /* IE 9 */
-webkit-transform: rotate(42deg); /* Safari */
transform: rotate(42deg);
}
.tourne5m {
float: left;
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Safari */
transform: rotate(-5deg);
}
.tourne80 {
float: left;
-ms-transform: rotate(80deg); /* IE 9 */
-webkit-transform: rotate(80deg); /* Safari */
transform: rotate(80deg);
}
.tourne35 {
float: left;
-ms-transform: rotate(35deg); /* IE 9 */
-webkit-transform: rotate(35deg); /* Safari */
transform: rotate(35deg);
}
.tourne12m {
float: left;
-ms-transform: rotate(-12deg); /* IE 9 */
-webkit-transform: rotate(-12deg); /* Safari */
transform: rotate(-12deg);
}
</style>
</head>
<body onload="javascript:lancertout();">
<div><audio id="20awav" preload>
<source src="https://www.letime.net/alpha/2/son/16.wav">
</audio></div>
<div><audio id="21awav" preload>
<source src="https://www.letime.net/alpha/2/son/17.wav">
</audio></div>
<div><audio id="22awav" preload>
<source src="https://www.letime.net/alpha/2/son/18.wav">
</audio></div>
<div><audio id="23awav" src="https://www.letime.net/alpha/2/son/1.wav" preload></audio></div>
<div><audio id="24awav" src="https://www.letime.net/alpha/2/son/2.wav" preload></audio></div>
<div><audio id="25awav" src="https://www.letime.net/alpha/2/son/3.wav" preload></audio></div>
<div><audio id="26awav" src="https://www.letime.net/alpha/2/son/4.wav" preload></audio></div>
<div><audio id="27awav" src="https://www.letime.net/alpha/2/son/5.wav" preload></audio></div>
<div><audio id="28awav" src="https://www.letime.net/alpha/2/son/6.wav" preload></audio></div>
<div><audio id="29awav" src="https://www.letime.net/alpha/2/son/7.wav" preload></audio></div>
<div><audio id="30awav" src="https://www.letime.net/alpha/2/son/8.wav" preload></audio></div>
<div><audio id="31awav" src="https://www.letime.net/alpha/2/son/9.wav" preload></audio></div>
<div><audio id="32awav" src="https://www.letime.net/alpha/2/son/10.wav" preload></audio></div>
<div><audio id="33awav" src="https://www.letime.net/alpha/2/son/11.wav" preload></audio></div>
<div><audio id="34awav" src="https://www.letime.net/alpha/2/son/12.wav" preload></audio></div>
<div><audio id="35awav" src="https://www.letime.net/alpha/2/son/14.wav" preload></audio></div>
<div><audio id="36awav" src="https://www.letime.net/alpha/2/son/15.wav" preload></audio></div>
<div><audio id="37awav" src="https://www.letime.net/alpha/2/son/19.wav" preload></audio></div>
<div><audio id="38awav" src="https://www.letime.net/alpha/2/son/20.wav" preload></audio></div>
<div><audio id="39awav" src="https://www.letime.net/alpha/2/son/21.wav" preload></audio></div>
<div><audio id="40awav" src="https://www.letime.net/alpha/2/son/22.wav" preload></audio></div>
<div><audio id="41awav" src="https://www.letime.net/alpha/2/son/23.wav" preload></audio></div>
<div><audio id="42awav" src="https://www.letime.net/alpha/2/son/24.wav" preload></audio></div>
<div><audio id="43awav" src="https://www.letime.net/alpha/2/son/25.wav" preload></audio></div>
<div><audio id="44awav" src="https://www.letime.net/alpha/2/son/26.wav" preload></audio></div>
<div><audio id="45awav" src="https://www.letime.net/alpha/2/son/27.wav" preload></audio></div>
<div><audio id="46awav" src="https://www.letime.net/alpha/2/son/28.wav" preload></audio></div>
<div><audio id="47awav" src="https://www.letime.net/alpha/2/son/29.wav" preload></audio></div>
<div id="fleur1" class="cachemoi" >
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne35" style="margin-left:-18px ; margin-top:60px;"></div>
<div class="a_bras_g tourne20m" style="margin-left:-30px ; margin-top:140px;"></div>
<div class="cuisse_g" style="margin-left:-10px ; margin-top:210px;"></div>
<div class="molet_g" style="margin-left:-10px ; margin-top:290px;"></div>
<div class="pied_gaucheffp" style="margin-left:10px ; margin-top:400px;"></div>
<div class="pied_gaucheffpf tourne15m" style="margin-left:30px ; margin-top:400px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d" style="margin-left:0px ; margin-top:60px;">
<div class="a_bras_d tourne90" style="margin-left:40px ; margin-top:50px;"></div>
</div>
<div class="cuisse_d tourne10" style="margin-left:-22px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-70px ; margin-top:280px;"></div>
<div class="pied_droitf tourne45" style="margin-left:-110px ; margin-top:370px;"></div>
</div>
<!--twee-->
<div id="tweefleur1" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown=action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur1" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur1" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur2" class="cachemoi" >
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne35" style="margin-left:-18px ; margin-top:60px;"></div>
<div class="a_bras_g tourne20m" style="margin-left:-30px ; margin-top:140px;"></div>
<div class="cuisse_g" style="margin-left:-10px ; margin-top:210px;"></div>
<div class="molet_g" style="margin-left:-10px ; margin-top:290px;"></div>
<div class="pied_gaucheffp" style="margin-left:10px ; margin-top:400px;"></div>
<div class="pied_gaucheffpf tourne15m" style="margin-left:30px ; margin-top:400px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d" style="margin-left:0px ; margin-top:60px;">
<div class="a_bras_d tourne90" style="margin-left:40px ; margin-top:50px;"></div>
</div>
<div class="cuisse_d tourne10" style="margin-left:-22px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-70px ; margin-top:280px;"></div>
<div class="pied_droitf tourne45" style="margin-left:-110px ; margin-top:370px;"></div>
</div>
<!--twee-->
<div id="tweefleur2" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur2" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur2" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur3" class="cachemoi">
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne45" style="margin-left:-28px ; margin-top:50px;"></div>
<div class="a_bras_g tourne5m" style="margin-left:-50px ; margin-top:120px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g" style="margin-left:64px ; margin-top:260px;"></div>
<div class="pied_gaucheffp" style="margin-left:75px ; margin-top:373px;"></div>
<div class="pied_gaucheffpf tourne15m" style="margin-left:95px ; margin-top:373px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne15m" style="margin-left:18px ; margin-top:63px;">
<div class="a_bras_d tourne105" style="margin-left:37px ; margin-top:58px;"></div>
</div>
<div class="cuisse_d tourne15" style="margin-left:-27px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-75px ; margin-top:280px;"></div>
<div class="pied_droitf tourne45" style="margin-left:-115px ; margin-top:370px;"></div>
</div>
<!--twee-->
<div id="tweefleur3" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur3" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur3" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur4" class="cachemoi">
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne45" style="margin-left:-28px ; margin-top:50px;"></div>
<div class="a_bras_g tourne5m" style="margin-left:-50px ; margin-top:120px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g" style="margin-left:64px ; margin-top:260px;"></div>
<div class="pied_gaucheffp" style="margin-left:75px ; margin-top:373px;"></div>
<div class="pied_gaucheffpf tourne15m" style="margin-left:95px ; margin-top:373px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne15m" style="margin-left:18px ; margin-top:63px;">
<div class="a_bras_d tourne105" style="margin-left:37px ; margin-top:58px;"></div>
</div>
<div class="cuisse_d tourne15" style="margin-left:-27px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-75px ; margin-top:280px;"></div>
<div class="pied_droitf tourne45" style="margin-left:-115px ; margin-top:370px;"></div>
</div>
<!--twee-->
<div id="tweefleur4" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur4" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur4" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur5" class="cachemoi">
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne60" style="margin-left:-40px ; margin-top:45px;"></div>
<div class="a_bras_g tourne5" style="margin-left:-75px ; margin-top:100px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g tourne30m" style="margin-left:94px ; margin-top:270px;"></div>
<div class="pied_gauchef tourne30m" style="margin-left:135px ; margin-top:362px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne30m" style="margin-left:30px ; margin-top:60px;">
<div class="a_bras_d tourne120" style="margin-left:37px ; margin-top:68px;"></div>
</div>
<div class="cuisse_d tourne30" style="margin-left:-47px ; margin-top:205px;"></div>
<div class="molet_d tourne75" style="margin-left:-117px ; margin-top:260px;"></div>
<div class="pied_droitf tourne75" style="margin-left:-165px ; margin-top:350px;"></div>
</div>
<!--twee-->
<div id="tweefleur5" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur5" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur5" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur6" class="cachemoi" >
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne60" style="margin-left:-40px ; margin-top:45px;"></div>
<div class="a_bras_g tourne5" style="margin-left:-75px ; margin-top:100px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g tourne30m" style="margin-left:94px ; margin-top:270px;"></div>
<div class="pied_gauchef tourne30m" style="margin-left:135px ; margin-top:362px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne30m" style="margin-left:30px ; margin-top:60px;">
<div class="a_bras_d tourne120" style="margin-left:37px ; margin-top:68px;"></div>
</div>
<div class="cuisse_d tourne30" style="margin-left:-47px ; margin-top:205px;"></div>
<div class="molet_d tourne75" style="margin-left:-117px ; margin-top:260px;"></div>
<div class="pied_droitf tourne75" style="margin-left:-165px ; margin-top:350px;"></div>
</div>
<!--twee-->
<div id="tweefleur6" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur6" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur6" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur7" class="cachemoi">
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne80" style="margin-left:-40px ; margin-top:35px;"></div>
<div class="a_bras_g tourne30" style="margin-left:-90px ; margin-top:70px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g tourne45m" style="margin-left:104px ; margin-top:270px;"></div>
<div class="pied_gauchef tourne30m" style="margin-left:155px ; margin-top:362px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne45m" style="margin-left:30px ; margin-top:50px;">
<div class="a_bras_d tourne120" style="margin-left:37px ; margin-top:68px;"></div>
</div>
<div class="cuisse_d tourne30" style="margin-left:-47px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-107px ; margin-top:280px;"></div>
<div class="pied_droitfp tourne75" style="margin-left:-152px ; margin-top:378px;"></div>
<div class="pied_droitfpf" style="margin-left:-142px ; margin-top:417px;"></div>
</div>
<!--twee-->
<div id="tweefleur7" class="cachemoi" >
<div class="letout">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><b>Montpel'<br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur7" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur7" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
<div id="fleur8" class="cachemoi">
<div class="tete" onMouseDown="action1Press();" style="margin-left:0px ; margin-top:0px;"></div>
<div class="bras_g tourne80" style="margin-left:-40px ; margin-top:35px;"></div>
<div class="a_bras_g tourne30" style="margin-left:-90px ; margin-top:70px;"></div>
<div class="cuisse_g tourne45m" style="margin-left:30px ; margin-top:190px;"></div>
<div class="molet_g tourne45m" style="margin-left:104px ; margin-top:270px;"></div>
<div class="pied_gauchef tourne30m" style="margin-left:155px ; margin-top:362px;"></div>
<div class="corpsf tourne5" style="border-left: 1.5px dotted #ffcccc; border-right: 1.5px dotted #ffcccc; margin-left:-10px ; margin-top:60px;"></div>
<div class="bras_d tourne45m" style="margin-left:30px ; margin-top:50px;">
<div class="a_bras_d tourne120" style="margin-left:37px ; margin-top:68px;"></div>
</div>
<div class="cuisse_d tourne30" style="margin-left:-47px ; margin-top:205px;"></div>
<div class="molet_d tourne60" style="margin-left:-107px ; margin-top:280px;"></div>
<div class="pied_droitfp tourne75" style="margin-left:-152px ; margin-top:378px;"></div>
<div class="pied_droitfpf" style="margin-left:-142px ; margin-top:417px;"></div>
</div>
<!--twee-->
<div id="tweefleur8" class="cachemoi" >
<div class="letout" style="margin-left:10px ; margin-top:12px;">
<div class="corps">
<div class="ventre"><br/><br/><br/><br/><br/><b>Montpel'<br/><br/>libre </b></div>
<div class="pied_droit" onMouseDown="action1Press();"></div>
<div class="pied_gauche" onMouseDown="diminuLeVent();" style="margin-left:-5px;"></div>
</div>
<div class="oeil_gauche">
<div class="oeil_gauchepupille" style="margin-left:-55px ; margin-top:12px;">
<div class="reflet_gauche"></div>
</div>
</div>
<div class="oeil_droit">
<div class="oeil_droitpupille" style="margin-left:30px ; margin-top:12px;">
<div class="reflet_droit"></div> </div></div>
<div class="aile_gauche" onMouseDown="action1Press();"></div>
<div class="aile_droite" onMouseDown="action1Press();"></div>
<div class="lebec"></div>
<div class="lebecplus"></div></div>
</div>
<!--fin twee-->
<!-- drie-->
<div id="driefleur8" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin drie-->
<!-- vier-->
<div id="vierfleur8" class="cachemoi" >
<div class="petales1 indique" onMouseDown="acelereLeVent();" style="margin-left:442px ; margin-top:105px;">
</div>
</div>
<!--fin vier-->
</body>
</html>
effet de construction.
Nous pouvons créer différents effets de construction en laissant l'image se construire en superposant les images