Question

我一直试图在标签上点击图片而不用锚标签包围它。

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

不知道输入标签的“ type =“选项何时展开，但“ image”，“ date”，“ number”是一个微不足道的启示

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

4 个答案:

使用JavaScript构建图像

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