WEzards/imgs_to_puzzle.html at main · JustHacks/WEzards · 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Puzzle</title>
<meta name="description" content="Puzzle- Converting images to Puzzle" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="puzzleimg.css" />
<script src="puzzleimg.js"></script>
<style>
body{
background:#fbfbfe;
text-align:center;
}
h1 {
margin:5px auto;
font-size:22px;
}
h2 {
margin:0 auto 4px auto;
font-size:18px;
}
#dv1, #dv2 {
display:inline-block;
margin:5px 1px;
border:1px dashed #333;
text-align:center;
padding:3px;
}
blockquote {
text-align:left;
}
pre {margin:1px 1px 9px 1px;background:#fefebb;font-size:15px; font-weight:bold;text-align:left;color:blue;padding:3px 4px;}
</style>
</head>
<body>
<h1>Puzzle- Images to Puzzle</h1>

<div id="dv1">
<h2>Spring Dream</h2>
<!-- change images-->
<img src="22728159.jpg" width="580" height="435" alt="Spring Dream" class="imgs" />
</div>
<div id="dv2">
<h2>Tree</h2>
<!-- change images-->
<img src="22728159.jpg" width="310" height="465" alt="Tree" class="imgs" />
</div>
<script>
//<![CDATA[
//function called when the puzzle is completed
var solved = function(){
  alert('Congratulations');
}

//converts into puzzle all the images with class "imgs" in Div elements
//sets 3 columns and 4 rows, and value 0 for the 4th argument to Not display the button that solves the puzzle (1 to show it)
//calls the solved() function when the puzzle is completed
imgToPuzzle('div .imgs', 3, 4, 0, solved);
// ]]>
</script>

<blockquote>
- Images in page converted into simple puzzles.<br>

<hr>
</body>
</html>