Hoverable-Clickable-Map/index.html at master · forresttanaka/Hoverable-Clickable-Map · GitHub

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
<!doctype html>
<!-- This HTML/CSS/Javascript template adapted from http://html5reset.org/ -->
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->

<head data-template-set="html5-reset">

	<meta charset="utf-8">

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Forrest Tanaka’s Clickable Map Demo</title>

	<meta name="title" content="Forrest Tanaka’s Clickable Map Demo">
	<meta name="description" content="Forrest Tanaka’s demonstration of a clickable, hoverable map in HTML5/CSS/Javascript">
	<meta name="author" content="Forrest Tanaka">

	<link rel="stylesheet" href="_/css/style.css">
	<!--[if lt IE 8 ]> <link rel="stylesheet" href="_/css/ie.css"> <![endif]-->

	<!-- all our JS is at the bottom of the page, except for Modernizr. -->
	<script src="_/js/modernizr-1.7.min.js"></script>

</head>

<body>

<div id="wrapper">

	<header>

		<h1>A Hoverable, Clickable map of Hawaii</h1>

	</header>

	<div id="map">

		<!-- Dots on the map -->
		<!-- Each anchor has a glowing dot background image invisible until hovered over -->
		<a href="#" id="dot-bigisland" class="dot"></a>
		<a href="#" id="dot-maui" class="dot"></a>
		<a href="#" id="dot-kahoolawe" class="dot"></a>
		<a href="#" id="dot-lanai" class="dot"></a>
		<a href="#" id="dot-molokai" class="dot"></a>
		<a href="#" id="dot-oahu" class="dot"></a>
		<a href="#" id="dot-kauai" class="dot"></a>
		<a href="#" id="dot-niihau" class="dot"></a>
		<a href="#" id="dot-kaula" class="dot"></a>

		<!-- Information panels -->
		<!-- Each of the following class:island-text divs appears as an information panel floating above
				 the map. Only one appears at a time, and initially all are hidden. The Javascript in functions.js
				 match the id names of the dot anchors above with the id names of each div below.
		-->
		<div id="text-bigisland" class="island-text">
			<h2>The Big Island <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to The Big Island page" width="18" height="18"></a></h2>
			<p>The Big Island is larger than all of the other Hawaiian Islands combined. Because its Mauna Loa and Kīlauea volcanoes are active, the island of Hawai‘i is still growing.</p>
		</div> <!-- island-text -->

		<div id="text-maui" class="island-text">
			<h2>Maui <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Maui page" width="18" height="18"></a></h2>
			<p>Maui is also called the “Valley Isle” for the large isthmus between its northwestern and southeastern volcanoes and the numerous large valleys carved into both mountains.</p>
		</div> <!-- island-text -->

		<div id="text-kahoolawe" class="island-text">
			<h2>Kahoolawe <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Kahoolawe page" width="18" height="18"></a></h2>
			<p>Kahoolawe is the smallest of the eight main Hawaiian Islands. It has always been sparsely populated due to its lack of fresh water.</p>
		</div> <!-- island-text -->

		<div id="text-lanai" class="island-text">
			<h2>Lāna‘i <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Lanai page" width="18" height="18"></a></h2>
			<p>Lāna‘i is known as the Pineapple Island because of its past as an island-wide pineapple plantation. It has no traffic lights or shopping malls, and Four Seasons hotels supplies all public transportation.</p>
		</div> <!-- island-text -->

		<div id="text-molokai" class="island-text">
			<h2>Moloka‘i <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Molokai page" width="18" height="18"></a></h2>
			<p>Moloka‘i was the residence of Father Damien de Veuster, a Belgian priest and canonized Roman Catholic saint who cared for sufferers of leprosy.</p>
		</div> <!-- island-text -->

		<div id="text-oahu" class="island-text">
			<h2>Oahu <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Oahu page" width="18" height="18"></a></h2>
			<p>Oahu, known as “The Gathering Place,” is the most populous of the islands in Hawaii. The island is the result of two separate shield volcanoes with a broad valley between them.</p>
		</div> <!-- island-text -->

		<div id="text-kauai" class="island-text">
			<h2>Kaua‘i <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Kauai page" width="18" height="18"></a></h2>
			<p>Kaua‘i, known as the “Garden Isle,” is the oldest of the main Hawaiian Islands. It’s one of the wettest spots on earth, with an annual average rainfall of 1,200 centimeters.</p>
		</div> <!-- island-text -->

		<div id="text-niihau" class="island-text">
			<h2>Ni‘ihau <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Niihau page" width="18" height="18"></a></h2>
			<p>Ni‘ihau is generally off-limits to all but relatives of the island’s owners, U.S. Navy personnel, government officials and invited guests, giving it the nickname “The Forbidden Isle.”</p>
		</div> <!-- island-text -->

		<div id="text-kaula" class="island-text">
			<h2>Ka‘ula <a href="#"><img class="clickable" src="images/link-arrow.png" alt="Link to Kaula page" width="18" height="18"></a></h2>
			<p>Ka‘ula Island, also called Ka‘ula Rock, is a small, crescent-shaped offshore islet in the Hawaiian Islands.</p>
		</div> <!-- island-text -->

	</div> <!-- map -->

	<footer>

		<!-- This Creative Commons license allows you to use this work -- adapted or intact -- in your projects,
				 commercial or not, with or without attribution to Forrest Tanaka.
		-->
		<p><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />
		This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</p>
		<p>Attribution to Forrest Tanaka is not required</p>

	</footer>

</div> <!-- wrapper -->

<!-- All Javascripts aside from Modernizr are loaded after the footer -->

<script src="_/js/jquery-1.7.min.js"></script>
<script src="_/js/functions.js"></script>


</body>
</html>