Home/ Questions/Q 8355337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:49:55+00:00

These Sprite buttons are driving me bonkers. I can almost get them to work,

  • 0

These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite.

I’m playing with this very simple sprite image:

jp2Rollover Sprite

I’ve got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it.

For my CSS, I have the following:

#menu {
  left:10px;
  top:50px;
  height:300px;
  width: 147px;
  position:fixed;
}
.sprite {
  background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
  height:50px;
  padding-left: 50px;
  width:147px;
  z-index:1;
}
.sprite a {
  background-position: 0px 0px;
  color:Red;
  vertical-align: middle;
}
.sprite a:hover {
  background-position: 0px -50px;
  color:Yellow;
}
​

With that, my HTML is simple and small:

<html>
<body>
  <ul id="menu">
    <li class="sprite">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​

I can’t seem to get my active link image (at position 0) or my hover link image (at position 50) to show.

Also, I’d like to find a way to make the entire rectangular region (50 x 147) the hyperlink.

Could someone help me, please?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?

    CSS:

    #menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }

    And HTML:
    ​

    <html>
<body>
  <ul id="menu">
    <li class="sprite current">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​
    • 0