-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
71 lines (71 loc) · 2.24 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
<html>
<head>
<title>bunch</title>
<link href="style/main.css" rel="stylesheet" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='../../../scripts/jquery-1.7.2.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
function switchImage(id, image){
$('#' + id + " img").attr("src", "assets/images/" + id + "/" + image + ".png");
}
$(document).ready(function(){
$('.square').mouseenter(function(){
var id = $(this).attr('id'),
row = Math.ceil(id/3),
col = (id+2)%3+1;
switchImage(id, 5);
for(var i = 1; i < 10; i++){
if(i != id){
var iCol = (i+2)%3+1,
iRow = Math.ceil(i/3);
if(iRow == row){
iCol > col ? switchImage(i, 4) : switchImage(i, 6);
} else if(iCol == col){
iRow > row ? switchImage(i, 2) : switchImage(i, 8);
} else if(iRow > row){
iCol > col ? switchImage(i, 1) : switchImage(i, 3);
} else if(iRow < row){
iCol < col ? switchImage(i, 9) : switchImage(i, 7);
}
}
}
})
});
</script>
</head>
<body>
<div id="main">
<div id="1" class="square">
<img src="assets/images/1/5.png" width="300" height="300" />
</div>
<div id="2" class="square">
<img src="assets/images/2/5.png" width="300" height="300" />
</div>
<div id="3" class="square">
<img src="assets/images/3/5.png" width="300" height="300" />
</div>
<div id="4" class="square">
<img src="assets/images/4/5.png" width="300" height="300" />
</div>
<div id="5" class="square">
<img src="assets/images/5/5.png" width="300" height="300" />
</div>
<div id="6" class="square">
<img src="assets/images/6/5.png" width="300" height="300" />
</div>
<div id="7" class="square">
<img src="assets/images/7/5.png" width="300" height="300" />
</div>
<div id="8" class="square">
<img src="assets/images/8/5.png" width="300" height="300" />
</div>
<div id="9" class="square">
<img src="assets/images/9/5.png" width="300" height="300" />
</div>
</div>
</body>
</html>