CSS sprites navigation and Image disabled user

I created a css menu with css sprites, but the problem is the sprite, we don’t use the embedded image that we use in the background, only if the images are disabled in the browser, then it won’t show anything. any solution for this?

For instance:

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

this menu is against this quote

Make sure your site works with images of people with disabilities

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

idea. Although almost in the past there are still users who work at very low Internet speeds. Also, if the user needs to corrupt images, can they still access all the content they need?

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

This type of navigation should not be used.

+1
source share
3 answers

Do not use sprites for content images. They depend on the background images in the presentation layer (CSS). Put your content at the content level (HTML).

+7
source

You can create a 1x1 transparent pixel image and place it in a div that has a sprite. For instance:

 <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> 
+2
source

Why do you need texts on the menu?

-1
source

Source: https://habr.com/ru/post/1306232/


All Articles