使图像可点击而无需锚标记

Question

我一直在尝试使标签中的图像可点击，而不用锚标签将其包围。

目的是我使用了来自yahoo的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>

周围的单个标签不起作用。

锚标签看起来像

请帮忙！

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/

Answer 2

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

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

Answer 3

您可以通过多种选择来解决此问题。 首先是用JavaScript构建图像并将其添加到容器中。 在此过程中，您可以附加点击处理程序。 其次，您可以在设置选取框的html内容后添加处理程序。 让我们看一下两种方法：

使用JavaScript构建图像

var myImage = new Image();
myImage.src = 'foo.png';
myImage.onclick = function(){
  alert( 'You clicked me' );
};
...
marqueeContainer.appendChild( myImage );

对于您拥有的每个图像，都需要执行一次。

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

var myHTML = '<img src="foo.png" />';
marqueeContainer.innerHTML = myHTML;
marqueeContainer.images[0].onclick = function(){
  alert( 'You clicked me' );
};

此方法使您可以使用当前变量，该变量包含所有图像及其属性。

Answer 4

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

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_alt

不知道输入标签的“类型=”选项何时展开，但是“图像”，“日期”，“数字”是什么启示