Advanced Search

Accessible sprites

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.