Posted By

Moonsheeld on 11/18/10


Tagged

Sprites


Versions (?)

Accessible sprites


 / Published in: CSS
 

CSS sprites still accessible when images are disabled. As seen on http://ryanroberts.co.uk/_dev/experiments/accessible-rollovers/index.html . Disabled the "overflow: hidden" part to make the sprite accessible when images disabled AND text is zoomed.

  1. /*
  2.   HTML:
  3.   <a href="#"><span></span>My hidden text</a>
  4. */
  5.  
  6. a {
  7. display: block;
  8. position: relative;
  9. width: Xpx;
  10. height: Xpx;
  11. }
  12. a span {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. display: block;
  17. width: 100%;
  18. height: 100%;
  19. background: url(sprite.png) no-repeat 0 0;
  20. }

Report this snippet  

You need to login to post a comment.