FamilyMath/cssprite.html at master · onzfonz/FamilyMath · 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>CSS Sprite</title>
		<style type="text/css">

	#skyline {
    	width: 400px; height: 200px;
   	 	background: url(test-3.jpg);
  	  	margin: 10px auto; padding: 0;
    	position: relative;
	}

	#skyline li {
    	margin: 0; padding: 0; list-style: none;
    	position: absolute; top: 0;
	}

	#skyline li, #skyline a {
    	height: 200px; display: block;
	}

	#panel1b {left: 0; width: 95px;}
	#panel2b {left: 96px; width: 75px;}
	#panel3b {left: 172px; width: 110px;}
	#panel4b {left: 283px; width: 117px;}

	#panel1b a:hover {
   	 	background: transparent url(test-3.jpg) 0 -200px no-repeat;
	}

	#panel2b a:hover {
    	background: transparent url(test-3.jpg) -96px -200px no-repeat;
	}

	#panel3b a:hover {
    	background: transparent url(test-3.jpg) -172px -200px no-repeat;
	}

	#panel4b a:hover {
    	background: transparent url(test-3.jpg) -283px -200px no-repeat;
	}

		</style>
	</head>
	<body>
		<ul id="skyline">
    		<li id="panel1b"><a href="#1"></a></li>
    		<li id="panel2b"><a href="#2"></a></li>
    		<li id="panel3b"><a href="#3"></a></li>
    		<li id="panel4b"><a href="#4"></a></li>
  		</ul>
	</body>
</html>