没有使用锚标签如何使图像可点击

Question

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

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

将单独的<a>标签用<p>包围无法正常工作。

锚点标记看起来像这样：

请帮忙！

- aman.kejriwal

---

直接在图片上使用“onclick”事件怎么样？ - fmgp

我尝试了，但是图片无法点击。 - aman.kejriwal

使用jQuery。$('img').on('click', function(){...}); - Joe

我想要删除的锚点看起来像这样... <a id="item" href="image_max.jpg" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'wide-border', captionOverlay: { position: 'rightpanel'}})"> - aman.kejriwal

@Joe jQuery是一个32kb的解决方案，用于解决50字节的问题。在项目中添加不必要的膨胀是不明智的。点击处理程序是一件微不足道的事情，并且可以轻松地使用原始JavaScript完成。 - Sampson

看一下我放在 jsfiddle 上的代码，你可以查看源代码来了解它是如何工作的。 - Undefined

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/

- Undefined

---

我写了类似这样的东西........................................... <style type="text/css"> #example { cursor:pointer; } </style><script type="text/javascript" src="highslide/highslide-with-gallery.js"></script> <script type="text/javascript"> Cufon.now(); var marqueecontent = '<img id="test" src="marequee/DSC_11801.jpg" width="281" height="250" alt="Monique Relander" onclick="return hs.expand(this)"/>'; $("#example").click(function() { window.location = 'http://www.google.co.uk&#39; }); </script>我用Firebug试过了，没有错误但是不能点击。 - aman.kejriwal

你需要在img标签中添加id='example'，或者将$("#example")更改为$("#test")，并且将#example更改为#test。 - GregM

Answer 2

<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"是一个小小的启示

- DJDave

---

这并没有提供问题的答案，请写一条评论。 - Gourav

我没想到规范警察会这么快找上门来 - 我正在编辑的过程中。 - DJDave

没问题。首先，请确保您已经写好了一切，然后再发布答案。此外，这里没有专利警察XD ;) - Gourav

Answer 3

你可以添加jQuery库，然后像这样做。

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

- GregM

---

除了回答之外，将img样式设置为cursor:pointer是很好的，这样用户就知道它是可点击的。 - dm03514

Answer 4

你有几个解决方案来解决这个问题。第一种方法是使用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' );
};

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

- Sampson

---

我尝试了这个，结果得到了一个滚动的[object HTMLImageElement]。 - aman.kejriwal

@aman.kejriwal 不要将 innerHTML 设置为图像对象。请确保使用 appendChild。 - Sampson

@Sam，你的解决方案需要jQuery。这就像穿上钢铁侠装备来防止脚趾头被撞伤一样。 - Sampson

虽然我没有使用纯JavaScript得出答案，但这是真的。实际上，我本来想把它发布在问题上的。对此感到抱歉！ - Undefined

@GregM 没错 - 如果我可以穿着它避免踢到脚趾头，那当然会穿了。但希望你明白我的意思 :) - Sampson