-
Notifications
You must be signed in to change notification settings - Fork 0
/
Lab1.2.html
91 lines (81 loc) · 2.91 KB
/
Lab1.2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="Data Visualisation Exercise 1"/>
<meta name="keywords" content="HTML, CSS"/>
<meta name="author" content="Your name here"/>
<title>Task 1.2 JavaScript Demo Page</title>
<!--Insert description of exercise -->
<style>
figcaption {
display: block;
}
h1{
font-family: Arial, Helvetica, sans-serif;
color:Tomato;
}
.button1{
background-color: #008CBA;
color: white;
}
.button2{
background-color: #aad110;
color: white;
}
.button3{
background-color: #b2149f;
color: white;
}
</style>
</head>
<body>
<h1>Pets and the Pandemic</h1>
<h2>Author of Interesting Article</h2>
<p>A report from Animal Medicines Australia (AMA) has found that many Australians took the opportunity to introduce a pet into their household during the pandemic. Their survey indicated that there was a significant increase in the percent of households taking in a new dog, fish or bird. Their research also indicated that pets had a number of positive influences on their lives such as:</p>
<ul>
<li>companionship</li>
<li>better mental health</li>
<li>joy and happiness</li>
</ul>
<button class="button1" onclick="changeImage('2019');">2019</button>
<button class="button2" onclick="changeImage('2021');">2021</button>
<button class="button3" onclick="changeImage('both');">Both</button>
<figure>
<img id="pet" src="Pet2019.jpg" alt="pet ownership" style="width:600px; height:300px;" class="center"><br>
<figcaption id="desc">Fig 1. Percent of Pet Ownership in 2019.
</figcaption>
</figure>
<script>
const img = document.getElementById('pet');
const text = document.getElementById('desc');
function changeImage(year){
if (year == "2019") {
img.src = "Pet2019.jpg";
text.innerHTML = "Fig 1. Percent of Pet Ownership in 2019";
return
};
if (year == "2021") {
img.src = "Pet2021.jpg";
text.innerHTML = "Fig 2. Percent of Pet Ownership in 2021";
return
};
if (year == "both") {
img.src = "Petboth.jpg";
text.innerHTML = "Fig 3. Percent of Pet Ownership in 2019 and 2021";
return
};
};
</script>
<p>With the increase in pet ownership the AMA are encouraging policy makers to consider the needs of companion animals and their owners when considering rental, strata and body corporate regulations are well as accepting animals in public places and transport.</p>
<p>
Go to <a href="/index.html">Lab 1 </a><a href="/lab2.1.html">,Lab 2 </a>
<a href="/Lab3/Lab3.1.html">,Lab 3 </a><a href="/Lab5/Lab5.1.html">,Lab 5 </a>
<a href="/Lab6/Lab6.1.html">,Lab 6 </a><a href="/Lab7/Lab7.1.html">,Lab 7 </a>
<a href="/Lab8/Lab8.1.html">,Lab 8 </a>
<br>Lab task 1.1 <a href="/index.html">HTML and CSS</a>
<br>Lab task 1.3 <a href="/lab1.3.html">Drawing Shapes with SVG</a>
</p>
<footer>COS30045 Data Visualisation <br> Semester 4 2022</footer>
</body>
</html>