CSS sprite導航和用戶禁用圖像

我做了一個css精靈的CSS菜單，但問題是與精靈我們不使用內聯圖像，我們只在後臺使用，所以如果在瀏覽器中禁用圖像，則不會顯示任何內容。任何解決方案？CSS sprite導航和用戶禁用圖像

例如：

看到這個菜單和關閉影像：http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html（它不會被看到，如果圖像是在瀏覽器中禁用）

此菜單是對這個報價

確保您的網站與圖像配合使用殘疾人
Creating a site that relies too heavily on images is never a good 
的想法。雖然幾乎是過去的事情，但仍然有用戶以非常低的網速運行。此外，如果用戶需要 - 對於任何原因 - 禁用圖像，他們仍然可以訪問他們需要的所有內容？

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

我們不應該使用這種類型的導航。

來源

2009-10-01 Jitendra Vyas

-1

爲什麼你需要ALT菜單中的文本？

來源

2009-10-01 14:27:09 innaM

可訪問性原因，如果圖像是禁用的導航應該可以訪問 – 2009-10-01 14:28:36

這是否意味着你的菜單完全由背景圖片的？沒有文字？ – innaM 2009-10-01 14:34:21

不，我有鏈接文本，但文本被css隱藏文本屬性 – 2009-10-01 14:37:07

請勿將精靈用於內容圖像。它們依賴於表示層（CSS）中的背景圖像。把你的內容放在內容層（HTML）中。

來源

2009-10-01 14:27:55 Quentin

我不是要求內容圖像。 – 2010-05-24 03:33:18

圖像上有文字。單詞傳達信息。用戶需要這些信息才能知道鏈接的位置。 **這是內容！** – Quentin 2010-05-24 05:21:43

Dorward然後我們不應該使用這種類型的菜單http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html – 2010-05-27 03:18:26

您可以創建一個1x1透明像素圖像，並將其放在具有精靈的div內。例如：

<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>

來源

2009-10-18 22:06:21 Wilkins

我使用下拉菜單上的精靈http://www.cssgirl.com/examples/css-sprites-son-of-suckerfish-dropdown.html如果圖像被用戶禁用，則不能訪問此菜單 – 2009-10-22 17:49:47

如果圖像被禁用，則1x1清晰像素圖像將執行此操作。如果用戶禁用了圖像（它是透明的，所以它不會被「看到」），像素圖像的目的是僅生成alt標籤。我在禁用圖片的情況下測試了您的網站，如果您知道將鼠標懸停在哪裏，則下拉菜單仍會顯示。將像素圖像置於適當的位置將爲用戶提供實際菜單所在位置的視覺判斷。 – Wilkins 2009-10-23 13:47:07

但在這種情況下，我們需要刪除鏈接文本，這是有用的SEO和屏幕閱讀器 link text – 2009-11-15 10:21:40

CSS sprite導航和用戶禁用圖像

回答

相關問題