<!DOCTYPE html>
<html>
<head>
<title>Dessin marche en CSS</title>
<script type="text/javascript">
var mua1 = 0;
function action1Press(){
mua1 = mua1 + 1;
if(mua1>3){
mua1 =0;
}
multitouchea(mua1);
}
function multitouchea(mua1){
if(mua1==0){
var multia1 = document.getElementById("1awav");
multia1.play();
}
else if(mua1==1){
var multia2 = document.getElementById("1bwav");
multia2.play();
}
else if(mua1==2){
var multia3 = document.getElementById("1cwav");
multia3.play();
}
else if(mua1==3){
var multia4 = document.getElementById("1dwav");
multia4.play();
}
}
</script>
<style>
body {
position: relative;
margin-left: 0px;
margin-top: 15px;
}
.route {position: absolute; width: 60px; height: 20px; background: #666699; }
.mont1 {position: absolute; width: 20px; height: 20px; background: green; -webkit-border-radius: 50px 50px 50px 50px / 90px 90px 20px 20px; border-radius: 50% 50% 50% 50% / 90% 90% 20% 20%;}
.maison1 {position: absolute; width: 160px; height: 120px; background: #cc0066; }
.maison2 {position: absolute; width: 100px; height: 140px; background: #999966; }
.maison3 {position: absolute; width: 100px; height: 140px; background: #999966; }
.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);
}
.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);
}
</style>
</head>
<body>
<div class="route" style="width: 800px; height: 200px; margin-left: 0px; margin-top: 0px; background: #99ebff;"></div>
<div class="mont1" style="width: 200px; height: 150px; margin-left: 100px; margin-top: 50px;"></div>
<div class="mont1" style="width: 300px; height: 200px; margin-left: 250px; margin-top: 0px;"></div>
<div class="mont1" style="width: 200px; height: 150px; margin-left: 450px; margin-top: 50px; background: #33cc33;"></div>
<div class="mont1" style="width: 200px; height: 150px; margin-left: 0px; margin-top: 50px; background: #33cc33;"></div>
<div class="route" style="width: 800px; height: 80px; margin-left: 0px; margin-top: 500px;"></div>
<div class="route" style="width: 800px; height: 60px; margin-left: 0px; margin-top: 440px; background: white;"></div>
<div class="route" style="width: 800px; height: 80px; margin-left: 0px; margin-top: 360px;"></div>
<div class="route" style="width: 800px; height: 60px; margin-left: 0px; margin-top: 300px; background: white;"></div>
<div class="maison1" style="margin-left:0px; margin-top: 140px;"></div>
<div class="maison2" style="margin-left:175px; margin-top: 120px;"></div>
<div class="maison3" style="margin-left:295px; margin-top: 120px;"></div>
<div class="maison1" style="margin-left:400px; margin-top: 140px;"></div>
<div class="maison1" style="margin-left:590px; margin-top: 140px;"></div>
</body>
</html>