CSS sprites navigation and User with image disable

Question

I made a css menu with css sprites but the problem is with sprite we don't use inline image we use in background only so if images are disabled in browser then nothing will show . any solution for this ?

For example :

See this menu and turn off images : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html (it will not be seen if images are disabled in browser)

this menu is against on this quote

Ensure your website works with images disabled

Creating a site that relies too heavily on images is never a good

idea. Although almost a thing of the past, there are still users who run at very low internet speeds. Also, if a user needs to—for whatever reason—disable images, can they still access all the content they need to?

http://csswizardry.com/quick-tips/#tip-02

Shouldn't we use this type of navigation.

Answer 1

Don't use sprites for content images. They depend on being background-images in the presentation layer (CSS). Put your content in the content layer (the HTML).

Answer 2

You can create a 1x1 transparent pixel image and put it within the div that has the sprite. For example:

<style type="text/css">
#linkContainer {background:url(images/sprite.gif) 0 50 no-repeat}
//sprite selection width/height, set cursor to pointer so users know its a link
#linkContainer img {width:50px;height:25px;cursor:pointer}  
<style>
<div id="buttonContainer"><img src="pixel.gif" alt="Your alt text"></div>

Answer 3

Why would you need alt texts in a menu?