如何用文本链接替换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图像按钮？

回答

相关问题