Hi,
The script below will not work, all it does is display one image and does not change on mouse hover, what am I doing wrong????
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Image Slicing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#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"></li>
<li id="panel2b"></li>
<li id="panel3b"></li>
<li id="panel4b"></li>
</ul>
</body>
</html>
The script below will not work, all it does is display one image and does not change on mouse hover, what am I doing wrong????
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Image Slicing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#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"></li>
<li id="panel2b"></li>
<li id="panel3b"></li>
<li id="panel4b"></li>
</ul>
</body>
</html>
