forked from iaac-macad-s1/lecture1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (64 loc) · 2.57 KB
/
index.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
<!-- see also https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started -->
<!DOCTYPE html>
<html>
<!-- everything that isn't content -->
<head>
<meta charset="utf-8">
<title>Example 1</title>
<!-- css -->
<style>
/* uncomment to change default font */
/* html {
font-family: sans-serif;
} */
html {
font-family: sans-serif;
}
img {
width: 512px;
/* set image width */
}
#caption {
display: none;
/* start with caption hidden */
font-style: italic;
}
</style>
</head>
<!-- content -->
<body>
<!-- some text and links -->
<p>
<a href="https://commons.wikimedia.org/wiki/File:Black_hole_-_Messier_87_crop_max_res.jpg">Event Horizon
Telescope, uploader cropped and converted TIF to JPG</a>, <a
href="https://creativecommons.org/licenses/by/4.0">CC BY 4.0</a>, via Wikimedia Commons
</p>
<!-- an image -->
<img id="myImage" alt="Black hole - Messier 87 crop max res"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Black_hole_-_Messier_87_crop_max_res.jpg/1024px-Black_hole_-_Messier_87_crop_max_res.jpg">
<!-- a caption -->
<p id="caption">
The Event Horizon Telescope (EHT) — a planet-scale array of eight ground-based radio telescopes forged through
international collaboration — was designed to capture images of a black hole. In coordinated press conferences
across the globe, EHT researchers revealed that they succeeded, unveiling the first direct visual evidence of
the supermassive black hole in the centre of Messier 87 and its shadow.
</p>
<!-- javascript -->
<script type="application/javascript">
// get reference to html elements
const img = document.getElementById('myImage')
// listen to events related to the image
img.addEventListener('mouseover', mouseOver, false)
img.addEventListener('mouseout', mouseOut, false)
// define what happens when there is a mouse over event
function mouseOver() {
document.getElementById('caption').style.display = 'block';
}
// define what happens when there is a mouse out event
function mouseOut() {
document.getElementById('caption').style.display = 'none';
}
</script>
<!-- the end -->
</body>
</html>