javascript - 在没有 anchor 标记的情况下使图像可点击

Question

我一直在尝试使标签中的图像可点击而不用 anchor 标签包围它。

目的是我使用 yahoo 的 cfyon 脚本来制作滚动的图像选取框。选取框很好，但要求包括使选取框的每张图片都可点击。单击时，将调用一个 javascript 函数。使用以下代码将这些图像提供给脚本。

  <script type="text/javascript">
    Cufon.now();
    var marqueecontent = '<img src="marequee/DSC_11801.jpg" width="281" height="250" alt="Monique Relander"  class="highslide" onclick="return hs.expand(this)"/><img src="marequee/DSC_10541.jpg" width="274" height="250" alt="Monique Relander" /><img src="marequee/leather-chairs1.jpg" width="221" height="250" alt="Monique Relander" /><img src="marequee/tassel-lamp.jpg" width="194" height="250" alt="Monique Relander" /><img src="marequee/angellamp.jpg" width="162" height="250" alt="Monique Relander" /><img src="marequee/daybed.jpg" width="384" height="250" alt="Monique Relander" /><img src="marequee/birdcage.jpg" width="208" height="250" alt="Monique Relander" /><img src="marequee/oakchair.jpg" width="161" height="250" alt="Monique Relander" /><img src="marequee/candelabras.jpg" width="188" height="250" alt="Monique Relander" />';
  </script>

用 包围单个标签不起作用。

anchor 标签看起来像

请帮忙!

Answer 1

假设你有这样一张图片

<img id="example" src="blah.jpg" />

您可以通过使用 css 对其进行样式设置使其可点击:

#example
  {
    cursor:pointer;
  }

然后使用 javascript + jquery 库

$("#example").click(function() {
  window.location.href = 'http://www.google.co.uk'
});

编辑: 我整理了一个 jsfiddle 来展示它的实际效果:http://jsfiddle.net/sn6um/1/show/