-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwildlife.html
141 lines (133 loc) · 5.74 KB
/
wildlife.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/camera.png">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Wildlife</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXMT8M416L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXMT8M416L');
</script>
</head>
<body>
<a class = "skip" href="#main">Skip to Main Content</a>
<header>
<nav>
<ul class="nav_links">
<li class="home"><a href = "index.html"><i class="fa-solid fa-camera"></i> About</a></li>
<li><a href = "landscape.html"><i class="fa-solid fa-mountain-sun"></i> Landscape</a></li>
<li class="active"><a href = "wildlife.html"><i class="fa-solid fa-cow"></i> Wildlife</a></li>
<li><a href = "family.html"><i class="fa-solid fa-people-group"></i> Family</a></li>
</ul>
</nav>
<h1 id="main">Wildlife</h1>
</header>
<main>
<button onclick="changeLanguage(this)" id="language">中文</button>
<p class="en">We saw many animals on our trip. We got a photo of almost every animal we saw though this isn't all of them.
We also missed getting pictures of a couple animals that got away too fast. However, we still managed to get
really good pictures of large animals. The most exciting was when we got to see a family of grizzlies.
</p>
<p class="ch">
我们在旅途中看到了很多动物。我们得到了几乎所有我们看到的动物的照片，尽管这不是全部。
我们也错过了拍摄几只逃得过快的动物的照片。但是，我们仍然设法得到
大型动物的真正好照片。最令人兴奋的是当我们看到一个灰熊家族时。
</p>
<div class='gridGallery'>
<figure id="J" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/bear.jpg" alt = "two grizzlies by a dam " class='image'/>
<figcaption class="fig_text">Grizzlies near Jackson River Dam</figcaption>
</figure>
<figure id="K" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/bird.jpg" alt = "bird in sky" class='image'/>
<figcaption class="fig_text">Bird spotted in the sky</figcaption>
</figure>
<figure id="L" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/bison.jpg" alt = "bison by shrubbery" class='image'/>
<figcaption class="fig_text">Bison near Lamar Valley</figcaption>
</figure>
<figure id="M" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/bisons.jpg" alt = "two bisons, a baby bison, and some birds by some hot springs" class='image'/>
<figcaption class="fig_text">Family of Bison and Birds near Hot Springs</figcaption>
</figure>
<figure id="N" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/cranes.jpg" alt = "two cranes in a field" class='image'/>
<figcaption class="fig_text">Sandhill Cranes at Willow Flats</figcaption>
</figure>
<figure id="O" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/moose.jpg" alt = "moose standing in grass by the river" class='image'/>
<figcaption class="fig_text">Moose by Moose Wilson Road</figcaption>
</figure>
<figure id="P" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/killdeer.jpg" alt = "killdeer standing in the grass" class='image'/>
<figcaption class="fig_text">Killdeer at Mammoth Hot Springs</figcaption>
</figure>
<figure id="Q" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/muledeer.jpg" alt = "mule deer eating flowers" class='image'/>
<figcaption class="fig_text">Mule Deer at Mammoth Hot Springs</figcaption>
</figure>
<figure id="R" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/pronghorn.jpg" alt = "pronghorn in a field" class='image'/>
<figcaption class="fig_text">Pronghorn at Lamar Valley</figcaption>
</figure>
</div>
</main>
<footer>
<p>Claire Wan ~ Yellowsone Photographs</p>
</footer>
<script>
function changeLanguage(item) {
console.log('button pressed')
// console.log(document.get)
var ch = document.getElementsByClassName('ch');
var en = document.getElementsByClassName('en');
console.log("inner text: " + item.innerText)
// console.log(item.innerText)
if (item.innerText == 'English') {
console.log("ENGLISH")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "none";
en[i].style.display = "block";
}
item.innerText = '中文'
}
else {
console.log("CHINESE")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "block";
en[i].style.display = "none";
}
item.innerText = 'English'
}
}
function color(item) {
console.log(item)
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'none'
image.style.transition = '0.75s'
text.style.display = 'table-caption';
}
function blackwhite(item) {
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'grayscale(100%)'
image.style.transition = '3s'
text.style.display = 'none';
}
</script>
</body>
</html>