Skip to content

Commit e6d8ba6

Browse files
bethrobsonbethrobson
committed
adding chapter 9 code
1 parent 91b9a8b commit e6d8ba6

21 files changed

+242
-0
lines changed

‎chapter9/event.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title> I'm alive! </title>
5+
<meta charset="utf-8">
6+
<script>
7+
window.onload = pageLoadedHandler;
8+
function pageLoadedHandler() {
9+
alert("I'm alive!");
10+
}
11+
</script>
12+
</head>
13+
<body>
14+
</body>
15+
</html>

‎chapter9/five.jpg‎

137 KB
Loading

‎chapter9/fiveblur.jpg‎

20.8 KB
Loading

‎chapter9/four.jpg‎

116 KB
Loading

‎chapter9/fourblur.jpg‎

22.3 KB
Loading

‎chapter9/image.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title> Image Guess </title>
6+
<style>
7+
body { margin: 20px; }
8+
img { margin: 20px; }
9+
</style>
10+
<script>
11+
window.onload = init;
12+
13+
function init() {
14+
var image = document.getElementById("zero");
15+
image.onclick = showAnswer;
16+
};
17+
18+
function showAnswer() {
19+
var image = document.getElementById("zero");
20+
image.src = "zero.jpg";
21+
}
22+
</script>
23+
</head>
24+
<body>
25+
<img id="zero" src="zeroblur.jpg">
26+
</body>
27+
</html>

‎chapter9/imageMouse.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title> Image Guess </title>
6+
<style>
7+
body { margin: 20px; }
8+
img { margin: 20px; }
9+
</style>
10+
<script>
11+
window.onload = function() {
12+
var images = document.getElementsByTagName("img");
13+
for (var i = 0; i < images.length; i++) {
14+
images[i].onmouseover = showAnswer;
15+
images[i].onmouseout = reblur;
16+
}
17+
};
18+
function showAnswer(eventObj) {
19+
var image = eventObj.target;
20+
var name = image.id;
21+
name = name + ".jpg";
22+
image.src = name;
23+
}
24+
25+
function reblur(eventObj) {
26+
var image = eventObj.target;
27+
var name = image.id;
28+
name = name + "blur.jpg";
29+
image.src = name;
30+
}
31+
</script>
32+
</head>
33+
<body>
34+
<img id="zero" src="zeroblur.jpg">
35+
<img id="one" src="oneblur.jpg">
36+
<img id="two" src="twoblur.jpg">
37+
<img id="three" src="threeblur.jpg">
38+
<img id="four" src="fourblur.jpg">
39+
<img id="five" src="fiveblur.jpg">
40+
</body>
41+
</html>

‎chapter9/imageMultiple.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title> Image Guess </title>
6+
<style>
7+
body { margin: 20px; }
8+
img { margin: 20px; }
9+
</style>
10+
<script>
11+
window.onload = init;
12+
13+
function init() {
14+
var images = document.getElementsByTagName("img");
15+
for (var i = 0; i < images.length; i++) {
16+
images[i].onclick = showAnswer;
17+
}
18+
};
19+
20+
function showAnswer(e) {
21+
var image = e.target;
22+
var name = image.id;
23+
name = name + ".jpg";
24+
image.src = name;
25+
}
26+
27+
</script>
28+
</head>
29+
<body>
30+
<img id="zero" src="zeroblur.jpg">
31+
<img id="one" src="oneblur.jpg">
32+
<img id="two" src="twoblur.jpg">
33+
<img id="three" src="threeblur.jpg">
34+
<img id="four" src="fourblur.jpg">
35+
<img id="five" src="fiveblur.jpg">
36+
</body>
37+
</html>

‎chapter9/imageReblur.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title> Image Guess </title>
6+
<style>
7+
body { margin: 20px; }
8+
img { margin: 20px; }
9+
</style>
10+
<script>
11+
window.onload = function() {
12+
var images = document.getElementsByTagName("img");
13+
for (var i = 0; i < images.length; i++) {
14+
images[i].onclick = showAnswer;
15+
}
16+
};
17+
18+
function showAnswer(eventObj) {
19+
var image = eventObj.target;
20+
var name = image.id;
21+
name = name + ".jpg";
22+
image.src = name;
23+
24+
setTimeout(reblur, 2000, image);
25+
}
26+
27+
function reblur(image) {
28+
var name = image.id;
29+
name = name + "blur.jpg";
30+
image.src = name;
31+
}
32+
</script>
33+
</head>
34+
<body>
35+
<img id="zero" src="zeroblur.jpg">
36+
<img id="one" src="oneblur.jpg">
37+
<img id="two" src="twoblur.jpg">
38+
<img id="three" src="threeblur.jpg">
39+
<img id="four" src="fourblur.jpg">
40+
<img id="five" src="fiveblur.jpg">
41+
</body>
42+
</html>

‎chapter9/map.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Pirates Booty</title>
6+
<script>
7+
window.onload = init;
8+
function init() {
9+
var map = document.getElementById("map");
10+
map.onmousemove = showCoords;
11+
}
12+
13+
function showCoords(eventObj) {
14+
var map = document.getElementById("coords");
15+
var x = eventObj.clientX;
16+
var y = eventObj.clientY;
17+
map.innerHTML = "Map coordinates: " + x + ", " + y;
18+
}
19+
</script>
20+
</head>
21+
<body>
22+
<img id="map" src="map.jpg">
23+
<p id="coords">Move mouse over map to find coordinates...</p>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)