SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

    Code:
    <!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)
    Attached Images Attached Images
    MrBaseball34
    Hook'Em Horns!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast ghealy44's Avatar
    Join Date
    Sep 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    instead of (0, -138) add px after the number. So it will be -138px; etc.

    try that out.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Good eye ghealy, that should fix it

    A unit is always needed after the value.

  5. #5
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, ghealy44. that worked. Don't know how I missed it.
    MrBaseball34
    Hook'Em Horns!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •