如何在没有 javascript 的情况下使图像充当链接答案

【问题标题】：how to make an image act as a link w/o javascript如何在没有 javascript 的情况下使图像充当链接
【发布时间】：2011-05-26 03:48:53
【问题描述】：

让链接同时具有文本和图像的最佳解决方案是什么，并且该解决方案仍将在 XHTML 1.0 STRICT 下通过 w3c 验证？并且没有 JavaScript。

【问题讨论】：

标签： xhtml tags hyperlink image

【解决方案1】：

使用 CSS，一开始就不需要 javascript。

<a href="#" class="image">Hello</a>

<style>
    .image {
       padding-left: 20px; // width of image
       background: url(image.jpg) no-repeat scroll left center;
       height: 20px; // height of image
       line-height: 20px; //height of image
       // other rules that you need  
    }
</style>

【讨论】：

其实，我真的很喜欢你的。很清楚，没有html。事实上，这种情况下的形象只是为了“风格”和装饰。很好的解决方案！
老实说，这是一个非常棒的解决方案，展示了 css 的强大功能，并且完全经过了 xhtml 1.0 的严格验证，我一直在尝试解决这个问题，哈哈..谢谢。
:) css 确实非常强大，您需要做的就是找到解决方法并发挥创意。当我在这里看到您的新消息时，如果您对其中一个答案感到满意，您可以将其标记为已接受，左侧的 upvote-downvote 选项下方有一个勾号图标：P
这在技术上是不正确的，因为图像不是背景图像，而是内联图像，因此腐蚀的解决方案实际上是正确的。
不，你的错误，我不在乎图像本身是否有行为，我只需要它看起来好像它是“可点击的”。

【解决方案2】：

我会将链接（锚点）包裹在一个 div 周围，然后 give the div a background image w CSS。在 DIV 中添加一个包含文本的跨度并在跨度上设置“边距”样式以对齐文本以适应口味。

基本上测试 TEXT 看起来会叠加在图像上。

希望这会有所帮助。

【讨论】：

【解决方案3】：

您是否尝试过阅读http://htmldog.com/？这通常显示如何使用基本的 HTML

<a href="link.html">
  TEXT HERE
  <img src="imageurl.jpg" width="100" height="100" alt="TEXT HERE FOR ALT" />
</a>

【讨论】：

@mc10 我开悟了！