Problem with image rollovers

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)

Hi,
Can you upload your image to a server and give us the link?
It may take a while to get approved.

I suspect the problem is going to be with your BG positions or the image itself. When I disabled the BG positions and used BG colors your hovers worked fine.

instead of (0, -138) add px after the number. So it will be -138px; etc.

try that out.

Good eye ghealy, that should fix it :wink:

A unit is always needed after the value.

Thanks, ghealy44. that worked. Don’t know how I missed it.