6

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

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

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

锚标记看起来像

请帮忙！

4

4 回答 4

7

假设您有这样的图像

<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/

于 2012-04-20T13:05:33.467 回答
0

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

$("img").click(function (){/*Here you put your action*/});
于 2012-04-20T12:59:59.287 回答
0

你有几个选择来解决这个问题。首先是在 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' );
};

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

于 2012-04-20T13:01:13.513 回答
0 
<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”是一个小小的启示

于 2019-03-17T16:51:01.403 回答