2

I have some 10 buttons with image-text and hover states for each. What I want to do is use background-position, width and height to only show the part of the background image sprite and hover background-position to show the hover style. I'll also use an image replacement class on the element so that it remains accessible and indexable.

So (measurements are random):

[CSS]

.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, @necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}

[HTML]

<a href="someLink.html" class="menu button-1 ir">Button 1</a>
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>

What I want to know is if that is a good way of doing this or should it be done differently, like:

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

Then with JavaScript swap the image on hover.

Is there any difference between the two in terms of accessibility and robots?

Thank you.

Francisc
  • 77,430
  • 63
  • 180
  • 276
  • 2
    Looks good to me. My only thing is I would revisit the design and see if you could get away with the text staying as HTML simply for maintainability. – chipcullen Mar 26 '12 at 14:53
  • Hey. What do you mean by text staying as HTML? – Francisc Mar 26 '12 at 14:57
  • I meant try not having to replace the text with images, even if they are background images applied with CSS. I don't know your reasons for Image Replacing - I just try to avoid it at all costs. Maintenance is a pain. – chipcullen Mar 26 '12 at 16:45

1 Answers1

2

What you are doing is correct. Do not forget to add a display: block; to that link. Something else you can do is putting the actual link text in a span and then positioning that span absolute out of the screen. Like so:

<a href="" title="Test link"><span>Home page</span></a>

And in your css file:

a > span {position: absolute; top: -10000px;}
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • 2
    Consider using `text-indent: -100000px` instead of adding an extra span to the markup. – shaunsantacruz Mar 26 '12 at 14:56
  • Thanks. I usually try to add as little extra mark-up as possible. The `.ir` class takes care of hiding the text, so I don't need to set a negative text indent. – Francisc Mar 26 '12 at 14:58
  • @alpacalips That is indeed another possibility that saves you extra mark-up. Do note, though, that both our techniques are not really seen as 'legal' to search engines, because they are used a lot by spammers. Read more about it here: http://luigimontanez.com/2010/stop-using-text-indent-css-trick/ Francisc: If this is a satisfactory answer, please mark it as correct. – Bram Vanroy Mar 26 '12 at 16:01