Question

将图像用作链接的更好方法是什么..

<A HREF="javascript:password()">
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>

或者在img标签中使用onClick同样的事情？哪一个是可取的？两者都同样好用吗？

Answer 1

我会和其他人讨论，你应该总是采用语义方法。但是，看看href的价值，您似乎并未真正将链接到任何内容，而是您的a代码正在执行操作。

在这种情况下，你使用一个锚就好像它是一个按钮，无论如何语义都会丢失。我会带一个图像按钮：

<input type="image" src="pict1.gif" onclick="password();" />

为什么你想要关心语义（除了一般的SEO原因）之外的一个例子就是你正在指导浏览器发生了什么。例如，上面代码中的图像按钮或问题中锚点中的图像都会导致图像在悬停时具有pointer光标，而您必须明确地设置该行为的样式如果你使用普通的img onclick解决方案，可以有效地复制浏览器本身可以处理的内容。

Answer 2

我是好语义的粉丝。 <a>被设计为一个链接，所以我建议使用它：D

Answer 3

对于辅助功能，您应该使用锚标记。您可以设置样式以显示图像，即

<style>
  a.image {display:block; background-image: url('images/mypic.gif')}
</style>

<a class='image' href='acme.html' style=></a>

（也可能需要宽度和高度）

此外，如果您需要在点击中添加进一步处理，jQuery将提供真正的关注点分离。（请不要使用不使用jquery的OP，我在这里提出它作为一种方法，因为这个问题有点主观，并且关于最佳实践）

$(document).ready(function() {

  $(a.image).click(function(e) {
    password();
    e.preventDefault();
  });
});

Answer 4

有三种常用技巧：

a与href="javascript:whatever()"
a与href="#" onclick="whatever(); return false;"
img与onclick="whatever()"

（1）和（2）会在点击图像时在图像周围创建一个虚线焦点边框，有时这是不合需要的。

（1）和（2）在图像周围添加一个边框，与文档中的链接颜色相同，因此您可能需要设置border = 0。

（1）和（2）将在鼠标悬停时显示指针。

（3）表现不像链接...没有焦点边框，没有链接颜色边框没有手形指针，鼠标悬停时状态栏中没有显示任何内容。

就个人而言，我会选择选项3：使用a标记获取带你到某个地方的链接，不要将它们用作操作按钮。

Answer 5

使用a-tag，如果用户没有启用javascript，您可以使代码正常工作！所以我会选择一个标签，但也请记住，你可以使用jQuery或类似的东西来点击链接获得javascript效果。

Answer 6

我会选择一个锚点（A标签），除非有充分的理由去做其他事情。链接是 for 的锚点，因此您可以获得辅助功能等。

Answer 7

我不鼓励这两种做法。逻辑，表达和结构应始终是分开的。这样做：

myClickable.addEventListener('click', password, false);

Answer 8

如果它只是一个链接，那么锚对你来说效果很好，但是如果你要完成一些操作而不仅仅是重定向，那么按钮会更好。

这是将图像用作链接的更好方法

8 个答案: