-
Notifications
You must be signed in to change notification settings - Fork 6
/
contest.html
65 lines (60 loc) · 2.54 KB
/
contest.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spot the Difference Game</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Call Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Clicking in image map areas -->
<script type="text/javascript">
$(document).ready(function() {
// When clicked, show difference
$('#transparentmap AREA').click(function() {
var theDifference = '#'+$(this).attr('id')+'-diff';
$(theDifference).css('display', 'inline');
$(theDifference).data('clicked', true);
// When all differences selected/clicked, show email submission form
if($('#leaf-diff').data('clicked') && $('#petal-diff').data('clicked') && $('#light-diff').data('clicked') && $('#nolight-diff').data('clicked') && $('#sauce-diff').data('clicked')) {
$('#form_container').css('display', 'inline');
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="different"></div>
<div id="transparentmap">
<img class="transparentmap" src="contest_files/transparentmap.png" usemap="#photohunt" />
<map name="photohunt">
<area id="leaf" shape ="circle" coords="133, 280, 11" />
<area id="light" shape ="rect" coords="253, 2, 292, 24" />
<area id="nolight" shape ="rect" coords="273, 151, 293, 182" />
<area id="sauce" shape ="circle" coords="368, 385, 7" />
<area id="petal" shape ="rect" coords="261, 375, 281, 403" />
</map>
</div><!-- end transparent map -->
<div id="leaf-diff"></div>
<div id="light-diff"></div>
<div id="nolight-diff"></div>
<div id="sauce-diff"></div>
<div id="petal-diff"></div>
<h1>Spot the Difference Game</h1>
<div id="original">
<p>Can you spot the differences? Click on all five of them in the picture on the right to be entered to win.</p><br />
<img src="contest_files/HD_PhotoHunt_Before_0001_sm.jpg">
</div><!-- end original -->
<form method="post" action="sendEmail.php">
<div id="form_container">
<h1>Congratulations! You found all 5!</h1>
Submit your email address to be entered to win.<br />
<p><small>Email Address:</small> <input type="text" name="email" id="email" /></p>
<br /><p><input type="submit" name="submit" id="submit" value="Submit" /></p>
<ul id="response" />
</div><!--end main -->
</div><!-- end form container -->
</form>
</div></div><!-- end pagebg and main -->
</body>
</html>