Skip to content

Commit

Permalink
Do spinning cursor instead of tooltipping a popup for image.
Browse files Browse the repository at this point in the history
  • Loading branch information
@atom-box
atom-box committed Sep 2, 2021
1 parent a36dfe5 commit 780a129
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 38 deletions.
61 changes: 40 additions & 21 deletions clickableMaya.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,59 +21,78 @@
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;
}

/** Code for hovering over the mapped area of the image **/

div map area {
cursor: progress;
}


</style>
</head>

<body>

<section class="section">
<div class="container">
<h1>Glyph Seeker</h1>
<div class="tiny-text-holder">
<div class="lined tiny-text">
<p>Use your mouse to find glyphs for The Sun (easy), and The Knife (more difficult) </p>
<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"
/>

<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" href="sun.htm" target="_blank" onmouseover="alert('You found it; this is the Sun Glyph!')" alt="Knife glyph"/>

<area shape="circle" coords="299,152,9" onmouseover="alert('You found it; this is the Knife Glyph!')" alt="Knife glyph" />
<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">
<div class="tiny-text-holder">
<div class="lined tiny-text">
<p>See more versions of a Mayan <br/><a
href="https://duckduckgo.com/?q=maya+sun&kp=1&t=ffsb&iar=images&iax=images&ia=images">Sun Glyph</a>
<br><a href="https://duckduckgo.com/?t=ffsb&q=maya+tecpatl&iax=images&ia=images">
Knife Glyph</a>
</div>
</div>
<div class="cleared"></div>
<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 <a href="https://en.wikipedia.org/wiki/Templo_Mayor">
Templo Mayor</a> in 1978</p>
<p>Made by Evan at <a href="https://littlefurnace">Little Furnace</a></p>
<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>
<!--
Expand Down
1 change: 1 addition & 0 deletions images/here.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 15 additions & 17 deletions styles/sideline.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

@font-face {
font-family: Deibi;
src: url(./fonts/deibi.otf);
src: url(./fonts/deibi.otf);
}


Expand All @@ -25,16 +25,14 @@ body {
a:link {
color: white;
}
a:hover {
section div p a:hover, footer div p a:hover {
color: yellow;
}
a:visited {
color: white;
}

h1 a:hover {
color: yellow;
}


/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
Expand Down Expand Up @@ -64,7 +62,7 @@ section.timeline ol li div time{

section.timeline ol li div time {
color: var(--main-color);
font-size: 1.5rem;
font-size: 1.5rem;
font-family: Deibi;
}

Expand Down Expand Up @@ -231,7 +229,7 @@ button.arrow:hover {

.timeline .arrows img {
width: 45px;
height: 45px;
height: 45px;
}


Expand Down Expand Up @@ -267,42 +265,42 @@ button.arrow:hover {
@media screen and (max-width: 599px) {
.timeline ol,
.timeline ol li {
width: auto;
width: auto;
}

.timeline ol {
padding: 0;
transform: none !important;
}

.timeline ol li {
display: block;
height: auto;
background: transparent;
}

.timeline ol li:first-child {
margin-top: 25px;
}

.timeline ol li:not(:first-child) {
margin-left: auto;
}

.timeline ol li div {
width: 94%;
height: auto !important;
margin: 0 auto 25px;
}

.timeline ol li div {
position: static;
}

.timeline ol li:nth-child(odd) div {
transform: none;
}

.timeline ol li:nth-child(odd) div::before,
.timeline ol li:nth-child(even) div::before {
left: 50%;
Expand All @@ -312,7 +310,7 @@ button.arrow:hover {
border-left: 1px solid white;
height: 25px;
}

.timeline ol li:last-child,
.timeline ol li:nth-last-child(2) div::before,
.timeline ol li:not(:last-child)::after,
Expand Down

0 comments on commit 780a129

Please sign in to comment.