-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclickableMaya.html
executable file
·164 lines (138 loc) · 5.25 KB
/
clickableMaya.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<title>Mayan Calendar</title>
<meta charset="utf-8">
<!--
Stumbled upon this image mapping syntax at https://www.w3schools.com/tags/att_area_coords.asp
From history of the Internet I know mapped images were a big deal circa Batman Site, during Internet 1.0. Would score a zero for accessibility nowadays.
-->
<link rel="shortcut icon" href="images/dryer2.png" type="image/x-icon">
<link rel="icon" href="images/dryer2.png" type="image/x-icon">
<link rel="stylesheet" href="styles/sideline.css">
<style type="text/css">
body {
/* height: 100%;
width: 100%; */
margin: 0px;
padding: 0px;
text-align: center;
background-color: #aaa;
font-family: "Helvetica Neue", sans-serif;
}
/** Code for hover info **/
/* Hover style by Ty Strong https://codepen.io/tystrong/pen/rVJNrQ */
span#tool {
border: blue dashed 2px;
}
span#tool:hover {
border: white solid 2px;
}
/** This is a new cursor to signal when hovering over the mapped area of the image **/
div map area {
cursor: progress;
}
/** This is all for CSS animating the text when hovering, without using JS **/
/* This Hover Effect popover for text highlighting by Ty Strong: https://codepen.io/tystrong/pen/rVJNrQ */
dfn {
background: rgba(0, 0, 0, 0.2);
border-bottom: dashed 1px rgba(0, 0, 0, 0.8);
padding: 0 0.4em;
cursor: help;
font-style: normal;
position: relative;
}
dfn::after {
content: attr(data-info);
display: inline;
position: absolute;
top: 22px;
left: 0;
opacity: 0;
width: 230px;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
padding: 0.5em 0.8em;
background: rgba(0, 0, 0, 0.8);
color: #fff;
pointer-events: none;
/* This prevents the box from apearing when hovered. */
transition: opacity 250ms, top 250ms;
}
dfn::before {
content: '';
display: block;
position: absolute;
top: 12px;
left: 20px;
opacity: 0;
width: 0;
height: 0;
border: solid transparent 5px;
border-bottom-color: rgba(0, 0, 0, 0.8);
transition: opacity 250ms, top 250ms;
}
dfn:hover {
z-index: 2;
}
/* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {
opacity: 1;
}
dfn:hover::after {
top: 30px;
}
dfn:hover::before {
top: 20px;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<h1>Glyph Seeker</h1>
<div class="tiny-text-holder">
<div class="lined tiny-text">
<p>Look closely at the carvings. Try to touch your <a id="tool"
data-info="Lorem ipsum dolor sit amet, perspiciatis consectetur dolor.">mouse</a> to the
glyphs for The Sun (easy), and The Knife (more difficult) </p>
</div>
</div>
<div class="cleared"></div>
</div>
</section>
<div id="roundcalendar">
<img src="images/maya.jpg" width="528" height="704" alt="Planets" usemap="#planetmap" />
<map id="planetmap" name="planetmap">
<area shape="circle" title="sun glyph!" coords="240,200,39" alt="Sun Glyph" />
<area shape="circle" title="knife glyph!" coords="299,152,9" alt="Knife glyph" />
</map>
</div>
<section class="section">
<div class="container">
<p>See more Mayan glyphs for <a
href="https://duckduckgo.com/?q=maya+sun&kp=1&t=ffsb&iar=images&iax=images&ia=images"
target="_blank">The Sun</a> and <a
href="https://duckduckgo.com/?t=ffsb&q=maya+tecpatl&iax=images&ia=images" target="_blank">The
Knife</a> </p>
</div>
</section>
<section class="section">
<div class="container">
<p>This large calendar stone was discovered in CDMX by the <dfn
data-info=" The site of Templo Mayor is near the northeast corner of what is now the Zócalo, or main plaza, of Mexico City. Templo Mayor measures approximately 328 by 262 ft at its base. Construction began sometime after 1325, and it was rebuilt six times. The temple was destroyed by the Spanish in 1521 to make way for the new cathedral. (Wikipedia)">Templo
Mayor</dfn> excavation in 1978.</p>
</div>
</section>
<footer class="section">
<div class="container">
<p>Made by Evan at <a href="https://littlefurnace.com">Little Furnace</a></p>
</div>
</footer>
</body>
<!--
Attribution: Image of Evan Genest with stone, taken at Museo Nacional de Antropologia in CDMX by Meg Domroese
-->
</html>