如何用文本鏈接替換HTML圖像按鈕？

我想讓我的網頁高度兼容;所以當用戶在瀏覽我的網站時關閉所有樣式時，我希望他們能夠在文本中找到所有內容。問題是，我的一些網頁使用圖像按鈕類似如下：如何用文本鏈接替換HTML圖像按鈕？

<a href="next.html"><img src="images/next_button.png"></a>

這是因爲當我訪問一個網頁，這樣的按鈕（在無風格模式），我得到的按鈕圖像，而不是一個問題一個文本鏈接。在這種情況下，如何將圖像按鈕替換爲文本鏈接？謝謝！

來源

2010-08-08 Delup

您的意思是高度可訪問。看看漸進式增強的原則 - http://en.wikipedia.org/wiki/Progressive_enhancement – Oded 2010-08-08 19:01:08

的解決方案是隻使用文本在HTML與CSS中的圖片風格化他們：

HTML：

<a href="next.html" class="next-button"><span>Next</span></a>

CSS：

.next-button 
{ 
    display: inline-block; 
    width: 100px; /* image width */ 
    height: 20px; /* image height */ 
    background: url("../images/next_button.png") 
} 

.next-button span 
{ 
    display: none; 
}

編輯：使用額外的跨度標記顯示背景時隱藏文字

來源

2010-08-08 19:02:54 ggarber

越來越多的我發現自己在所有UI和設計中都使用這種方法。 ''標籤僅用於用戶生成的內容。 – eyelidlessness 2010-08-08 19:05:59

輝煌！非常感謝你！ – Delup 2010-08-08 19:26:44

請記住，內聯塊不能很好地與IE7，因此請確保你也採取以下解決方法只爲IE7 'zoom：1;' '* display：inline;' – Antony 2011-06-01 18:52:23

使用alt屬性？

<img src="images/next_button.png" alt="next" />

來源

2010-08-08 19:02:47 darma

實際上，HTML規範要求你有像這樣在你的img標籤的ALT屬性：

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a>

瀏覽器，比如文本模式的瀏覽器，屏幕閱讀器，以及其他不顯示圖像將自動替換圖像的ALT文本。

來源

2010-08-08 19:03:04

說到您的標記，除了缺少所需的alt屬性之外，它在訪問方面很好。在任何HTML驗證程序中運行此操作都會提醒您。

這也將是值得加入一個rel="next"屬性的a標籤，以表明它是一個關係鏈接到下一個頁面：

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a>

來源

2010-08-08 19:03:07 Oded

我認爲在這種情況下a可以將rel =「next」添加到'a'元素。 – Alohci 2010-08-08 19:23:22

@Alohci - 公平點，因爲語義似乎是正確的。 – Oded 2010-08-08 19:24:45

alt ATTRIBUTE;） – 2010-08-08 19:27:59

如前所述，適當的alt屬性將是容易解決。

我喜歡儘可能使用CSS按鈕的想法（從而設計實際文本的樣式）。如果您使用的是jQuery，請查看jQuery UI的新按鈕小部件。

您也可以使用圖片替換技術，在頁面上保留實際文字，然後用圖片覆蓋文字或通過CSS將文字推到一邊。在這兩種情況下，實際的文字都會出現在可訪問性/搜索引擎優化的目的中，圖像僅僅是一張背景圖片，使它看起來很漂亮。

來源

2010-08-08 19:30:07

如何用文本鏈接替換HTML圖像按鈕？

回答

相關問題