master
*anna* 4 years ago
parent a876728a8f
commit c4cda29984

BIN
.DS_Store vendored

Binary file not shown.

BIN
gifs/.DS_Store vendored

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

@ -0,0 +1,35 @@
div.figure1 {
position:absolute;
left: 15%;
top: 15%;
}
div.figure2 {
position:absolute;
left: 70%;
top: 30%;
}
div.figure3 {
position:absolute;
right: 10%;
top: 75%;
}
div.figure4 {
position:absolute;
left: 50%;
top: 50%;
}
div.figure5 {
position:absolute;
left:45%;
top: 10%;
}
div.figure6 {
position:absolute;
left:10%;
bottom: 15%;
}

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>wayfair</title>
<link rel="stylesheet" href="wayfair.css">
</head>
<body>
<div class="figure1">
<img id="forniture1" src="../gifs/forniture_1.gif" style="display: block;">
<img id="child1" src="../gifs/child_6.gif" style="display: none;">
</div>
<div class="figure2">
<img id="forniture2" src="../gifs/forniture_2.gif" style="display: block;">
<img id="child2" src="../gifs/child_2.gif" style="display: none;">
</div>
<div class="figure3">
<img id="forniture3" src="../gifs/forniture_3.gif" style="display: block;">
<img id="child3" src="../gifs/child_3.gif" style="display: none;">
</div>
<div class="figure4">
<img id="forniture4" src="../gifs/forniture_4.gif" style="display: block;">
<img id="child4" src="../gifs/child_4.gif" style="display: none;">
</div>
<div class="figure5">
<img id="forniture5" src="../gifs/forniture_5.gif" style="display: block;">
<img id="child5" src="../gifs/child_5.gif" style="display: none;">
</div>
<div class="figure6">
<img id="forniture6" src="../gifs/forniture_6.gif" style="display: block;">
<img id="child6" src="../gifs/child_1.gif" style="display: none;">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="wayfair.js" ></script>
</body>

@ -0,0 +1,39 @@
$(document).ready(function() {
$("#forniture1").hover(
function(){ $("#forniture1").hide()},
function(){ $("#child1").show()
});
$("#forniture2").hover(
function(){ $("#forniture2").hide()},
function(){ $("#child2").show()
});
$("#forniture3").hover(
function(){ $("#forniture3").hide()},
function(){ $("#child3").show()
});
$("#forniture4").hover(
function(){ $("#forniture4").hide()},
function(){ $("#child4").show()
});
$("#forniture5").hover(
function(){ $("#forniture5").hide()},
function(){ $("#child5").show()
});
$("#forniture6").hover(
function(){ $("#forniture6").hide()},
function(){ $("#child6").show()
});
});;

@ -0,0 +1,78 @@
div.figure1 {
position:absolute;
left: 15%;
top: 15%;
}
.fire1{
position:absolute;
right:10%;
top: 8%;
}
div.figure2 {
position:absolute;
left: 70%;
top: 30%;
}
.fire2{
position:absolute;
left:30%;
bottom:10%;
}
div.figure3 {
position:absolute;
right: 10%;
top: 75%;
}
div.figure4 {
position:absolute;
left: 50%;
top: 50%;
}
.fire4{
position:absolute;
left: 62%;
top: 45%;
}
div.figure5 {
position:absolute;
left:45%;
top: 10%;
}
.fire5{
position:absolute;
left:80%;
top: 45%;
}
div.figure6 {
position:absolute;
left:10%;
bottom: 15%;
}
.fire6{
position:absolute;
left:60%;
top: 10%;
}
div.figure7 {
position:absolute;
left:30%;
bottom: 45%;
}
.fire7{
position:absolute;
left:10%;
top: 20%;
}

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>:-)</title>
<link rel="stylesheet" href="rituals.css">
</head>
<body>
<div class="figure1">
<img id="kitchen1" src="../gifs/woman_cooking_1.gif" style="display: block;">
<img id="rituals1" width="90px" src="../gifs/woman_rites_1.gif" style="display: none;">
</div>
<div class="fire1" style="display: none;">
<img src="../gifs/fire_1.gif">
</div>
<div class="figure2">
<img id="kitchen2" src="../gifs/woman_cooking_2.gif" style="display: block;">
<img id="rituals2" width="90px" src="../gifs/woman_rites_2.gif" style="display: none;">
<img id="fire2" src="../gifs/fire_1.gif" style="display: none;">
</div>
<div class="fire2" style="display: none;">
<img src="../gifs/fire_2.gif" width="80px" >
</div>
<div class="figure3">
<img id="kitchen3" src="../gifs/woman_cooking_3.gif" style="display: block;">
<img id="rituals3" width="300px" src="../gifs/dragon_1.gif" style="display: none;">
</div>
<div class="figure4">
<img id="kitchen4" src="../gifs/woman_cooking_4.gif" style="display: block;">
<img id="rituals4" width="90px" src="../gifs/woman_rites_4.gif" style="display: none;">
</div>
<div class="fire4" style="display:none;">
<img src="../gifs/fire_3.gif">
</div>
<div class="figure5">
<img id="kitchen5" src="../gifs/woman_cooking_5.gif" style="display: block;">
<img id="rituals5" src="../gifs/woman_rites_5.gif" style="display: none;">
</div>
<div class="fire5" style="display: none;">
<img src="../gifs/fire.4.gif" >
</div>
<div class="figure6">
<img id="kitchen6" src="../gifs/woman_cooking_6.gif" style="display: block;">
<img id="rituals6" src="../gifs/devil_rites_1.gif" style="display: none;">
</div>
<div class="fire6" style="display: none;">
<img src="../gifs/fire_5.gif" >
</div>
<div class="figure7">
<img id="kitchen7" src="../gifs/woman_cooking_7.gif" style="display: block;">
<img id="rituals7" src="../gifs/woman_rites_3.gif" style="display: none;">
</div>
<div class="fire7" style="display: none;">
<img src="../gifs/fire_3.gif">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="rituals.js" ></script>
</body>

@ -0,0 +1,47 @@
$(document).ready(function() {
$("#kitchen1").hover(
function(){ $("#kitchen1").hide();
$("#rituals1").show();
$(".fire1").show();
});
$("#kitchen2").hover(
function(){ $("#kitchen2").hide();
$("#rituals2").show();
$(".fire2").show();
});
$("#kitchen3").hover(
function(){ $("#kitchen3").hide();
$("#rituals3").show();
$(".fire7").show() ;
});
$("#kitchen4").hover(
function(){ $("#kitchen4").hide();
$("#rituals4").show();
$(".fire4").show();
});
$("#kitchen5").hover(
function(){ $("#kitchen5").hide();
$("#rituals5").show();
$(".fire5").show();
});
$("#kitchen6").hover(
function(){ $("#kitchen6").hide();
$("#rituals6").show();
$(".fire6").show();
});
$("#kitchen7").hover(
function(){ $("#kitchen7").hide();
$("#rituals7").show();
});
});;

@ -43,7 +43,7 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</
<div id="gardenSpace" style="display:none"> <div id="gardenSpace" style="display:none">
<div id="pane"> <div id="pane">
<div id ="square"> <div id ="square">
<img src="walking.gif"> <img src="gifs/walking.gif">
</div> </div>
</div> </div>
</div> </div>

@ -0,0 +1,35 @@
div.figure1 {
position:absolute;
left: 15%;
top: 15%;
}
div.figure2 {
position:absolute;
left: 70%;
top: 30%;
}
div.figure3 {
position:absolute;
right: 10%;
top: 75%;
}
div.figure4 {
position:absolute;
left: 50%;
top: 50%;
}
div.figure5 {
position:absolute;
left:45%;
top: 10%;
}
div.figure6 {
position:absolute;
left:10%;
bottom: 15%;
}

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>wayfair</title>
<link rel="stylesheet" href="wayfair.css">
</head>
<body>
<div class="score">
score:<div id="result" ></div>
</div>
<div class="figure1">
<img id="forniture1" src="../gifs/forniture_1.gif" style="display: block;">
<img id="child1" src="../gifs/child_6.gif" style="display: none;">
</div>
<div class="figure2">
<img id="forniture2" src="../gifs/forniture_2.gif" style="display: block;">
<img id="child2" src="../gifs/child_2.gif" style="display: none;">
</div>
<div class="figure3">
<img id="forniture3" src="../gifs/forniture_3.gif" style="display: block;">
<img id="child3" src="../gifs/child_3.gif" style="display: none;">
</div>
<div class="figure4">
<img id="forniture4" src="../gifs/forniture_4.gif" style="display: block;">
<img id="child4" src="../gifs/child_4.gif" style="display: none;">
</div>
<div class="figure5">
<img id="forniture5" src="../gifs/forniture_5.gif" style="display: block;">
<img id="child5" src="../gifs/child_5.gif" style="display: none;">
</div>
<div class="figure6">
<img id="forniture6" src="../gifs/forniture_6.gif" style="display: block;">
<img id="child6" src="../gifs/child_1.gif" style="display: none;">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="wayfair.js" ></script>
</body>

@ -0,0 +1,48 @@
$(document).ready(function() {
var counter = 0;
$("#forniture1").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture1").hide();
$("#child1").show();
});
$("#forniture2").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture2").hide();
$("#child2").show();
});
$("#forniture3").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture3").hide();
$("#child3").show();
});
$("#forniture4").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture4").hide();
$("#child4").show();
});
$("#forniture5").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture5").hide();
$("#child5").show();
});
$("#forniture6").click(function(){
counter ++;
$('#result').html(counter);
$("#forniture6").hide();
$("#child6").show();
});
});;
Loading…
Cancel
Save