-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (60 loc) · 2.02 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
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
<!DOCTYPE HTML>
<html>
<head>
<title>Apply</title>
<meta charset = "UTF-8">
</head>
<!--
NOTE:
Because of the shortness of the html code
and demonstration purposes, the "style" attribute is used within html tags.
Nevertheless it is recommended to use CSS for styling.
The order of the images are defined with "z-index".
"position:relative" is needed
to move the images to a specific location which is positioned in the file "apply.js" with "top".
-->
<body>
<center>
<h2>Random Face</h2>
<section>
<!--PNG file should support transparency-->
<img src="Face.png" alt="ERROR:No Face image found" style="position:relative;z-index:1">
<!--EYES-->
<div id="eyesArea" style="z-index:0">
<!--position:relative; top: -250px;-->
</div>
<!--NOSE-->
<div id="noseArea" style="z-index:0">
<!--position:relative; top: -227px;-->
</div>
<!--MOUTH-->
<div id="mouthArea" style="z-index:0">
<!--position:relative; top: -210px;-->
</div>
</section>
<!--Checkbox face parts-->
<ul style="list-style-type:none">
<li style="display:inline-block">
<input type="checkbox" name="checkedAtr"> New eyes
</li>
<li style="display:inline-block">
<input type="checkbox" name="checkedAtr">New nose
</li>
<li style="display:inline-block">
<input type="checkbox" name="checkedAtr">New mouth
</li>
</ul>
<br>
<button type="button" onclick="faceIt()">NEW FACE</button>
<br>
<br>
--------------------------------------------------------------------------------------------------
<br>
<br>
For more explanation please visit -
<a href = "https://github.com/Incrementis/Javascript-use-of-apply-/wiki">
Use of apply Wiki</a>
</center>
</body>
<script language = "javascript" type = "text/javascript" src = "apply.js"></script>
</html>