Got an image 276pxX300px separated into 2 columns and 3 rows.
Want to do rollovers using this code but it isn’t working. The first image shows but doesn’t rollover,
the second and third image don’t show and don’t rollover.
What am I doing wrong here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Anchor Test</title>
<style type="text/css">
body {
background-color: #008000;
}
#video_1 {
display: block;
width: 138px;
height: 100px;
background: url(images/videos.png) no-repeat 0 0;
}
#video_1:hover {
background: url(images/videos.png) no-repeat 0 -138;
}
#video_1 span {
display: none;
}
#video_2 {
display: block;
width: 138px;
height: 100px;
background: url(images/videos.png) no-repeat -100 0;
}
#video_2:hover {
background: url(images/videos.png) no-repeat -100 -138;
}
#video_2 span {
display: none;
}
#video_3 {
display: block;
width: 138px;
height: 100px;
background: url(images/videos.png) no-repeat -200 0;
}
#video_3:hover {
background: url(images/videos.png) no-repeat -200 -138;
}
#video_3 span {
display: none;
}
#video_div span {
font-family: Arial;
color:#fff;
font-size:16px;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center" id="video_div">
<span>Watch some of our videos</span><br />
<a id="video_1" href="http://my_youtube_video_link.com"><span>Nothing</span></a><br />
<a id="video_2" href="http://my_youtube_video_link.com"><span>Nothing</span></a><br />
<a id="video_3" href="http://my_youtube_video_link.com"><span>Nothing</span></a><br />
</div>
</body>
</html>
Image is attached. (videos.png)