Javascript 使图像无需锚定标签即可点击

我一直在努力使标签中的图像可以点击，而不必用锚定标签将其包围

我的目的是使用雅虎的cfyon脚本制作一个滚动的图像字幕。该字幕是好的，但要求包括使每个画面的字幕点击。Onclick将调用一个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>

Cufon.now（）；
var marqueecontent=“”；

周围的单个标记不起作用

锚定标签看起来像

---

请帮忙

您可以添加jquery库并执行类似操作

$("img").click(function (){/*Here you put your action*/});

---

你有两个选择来解决这个问题。首先是用JavaScript构建图像并将其添加到容器中。在此过程中，可以附加单击处理程序。其次，可以在设置字幕的html内容后添加处理程序。让我们看看这两种方法：

使用JavaScript构建图像 这将需要为您拥有的每个图像执行一次

设置HTML内容，然后添加事件处理程序

var myHTML=''；
marqueeContainer.innerHTML=myHTML；
marqueeContainer.images[0].onclick=function（）{
警惕（‘你点击了我’）；
};

---

此方法允许您使用包含所有图像及其属性的当前变量。

假设您有这样的图像

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

然后使用javascript+jquery库

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

编辑： 我编写了一个jsfiddle来实际演示这一点：

---

不知道输入标记的“type=”选项何时展开，但“image”、“date”、“number”是一个小提示

直接在图像上显示“onclick”事件如何？我尝试过，但图像无法单击。请使用jQuery$（'img'）。在（'click'，function（）{…}）上；我要移除的锚看起来像这样@JoejQuery是一个32kb的解决方案，可以解决50字节的问题。给你的项目增加不必要的膨胀是不明智的。单击处理程序是一件小事，可以用原始JavaScript轻松完成。除此之外，最好将img设置为具有光标指针，以便用户知道它是可单击的。我这样做了，得到了一个滚动的[object HTMLImageElement]@aman.kejriwal不要将

innerHTML

设置为图像对象。请确保改用

appendChild

。@aman.kejriwal您是否有幸实现上述两种解决方案中的任何一种？请看一下我组合的JSFIDLE，您可以查看源代码以了解它是如何实现的works@Sam您的解决方案需要jQuery。这就像穿上铁人服防止脚趾受伤。我写了这样的东西。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。#示例{cursor:pointer；}Cufon.now（）；var marqueecontent=“”$（“#示例”）。单击（函数（）{window.location='''}）；我用firebug试过了。无错误但不可单击您必须在img标签中添加id='example'或更改$（“#example”）。这美元（“#测试”）。而这个测试的例子并没有提供问题的答案。请写一篇评论。没想到礼节警察会这么快找到我-我没问题。首先，确保你写了所有的东西，然后把答案贴出来。此外，这里没有合适的警察XD；）

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

#example
  {
    cursor:pointer;
  }

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

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">