-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
57 lines (49 loc) · 3.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Casterton House Farm Map</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<image src="Capture.png" alt="map" usemap="#farmmap" class="map">
<map name="farmmap">
<area alt="Field 1" data-toggle="modal" data-target="#myModal" coords="342,312,348,300,346,289,362,285,377,280,390,270,407,267,424,265,437,265,438,274,437,285,437,299,434,308,431,317,425,321,420,326,423,331,432,339,440,345,442,354,439,366,427,395,423,407,413,408,411,439,403,435,381,430,360,423,345,417,335,411,316,369,338,319" shape="poly">
<area alt="Field 2" data-toggle="modal" data-target="#myModal" coords="297,195,305,204,327,204,341,213,357,224,371,231,389,231,401,229,414,226,433,225,439,232,439,244,438,258,433,264,423,265,409,265,398,267,390,269,383,275,373,278,365,281,350,286,343,287,329,289,316,286,306,283,297,256,299,227" shape="poly">
<area alt="Field 3" data-toggle="modal" data-target="#myModal" coords="253,218,290,219,290,205,287,185,284,157,275,139,271,123,267,107,264,90,263,71,261,58,179,63,183,79,176,112,171,135,171,152,169,167,165,189,215,207,221,205,253,209" shape="poly">
<area alt="Field 4" data-toggle="modal" data-target="#myModal" coords="198,248,297,292,301,310,297,331,305,363,263,349,244,347,191,312" shape="poly">
<area alt="Field 5" data-toggle="modal" data-target="#myModal" coords="440,294,457,294,465,299,475,299,490,309,489,317,522,323,509,336,496,366,485,370,487,388,480,386,470,405,487,412,482,419,429,397,443,353,425,326" shape="poly">
<area alt="Field 6" data-toggle="modal" data-target="#myModal" coords="219,216,248,224,289,225,287,243,295,289,197,245" shape="poly">
<area alt="Field 7" data-toggle="modal" data-target="#myModal" coords="175,200,59,176,58,184,45,184,53,216,93,228,99,234,115,236,128,246,154,235,156,257,178,252,194,254,194,244,186,238,205,211" shape="poly">
<area alt="Field 8" data-toggle="modal" data-target="#myModal" coords="118,248,116,277,139,288,159,294,187,309,193,257,179,254,157,257,153,238" shape="poly">
<area alt="Field 9" data-toggle="modal" data-target="#myModal" coords="258,351,291,361,305,373,313,385,316,395,311,401,295,395,277,377" shape="poly">
</map>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>