图像作为按钮但没有按钮图像

【问题标题】：image as a button but without the button image图像作为按钮但没有按钮图像
【发布时间】：2014-03-30 15:38:10
【问题描述】：

这是一个简单的显示隐藏层脚本，当点击图像时我想点击图片而不是按钮，不想有丑陋的按钮图片morf或者想添加css样式来覆盖按钮

我尝试分配图像变量，但没有成功

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle(1000);
  });
});
</script>
</head>
<body>

<br><br>
<button onclick="toggle();"><img src="image.gif" /></button>////---- works
<image onclick="toggle();"><img src="image.gif" /></image>//// ----doesnt

<div id="div1" style="width:80px;height:80px;background-color:blue;"></div>

或者将行为分配给图像会更容易

【问题讨论】：

标签： html button layer

【解决方案1】：

在下面的代码行中——

 <image onclick="toggle();"><img src="image.gif" /></image>

您正在为<image> 标签分配一个点击处理程序，据我所知，HTML 中不存在该标签，因此浏览器不会呈现它。而将要呈现的<img> 没有点击事件处理程序..

直接改成

<img src="image.gif" onclick="toggle();"/>

为此，您应该有一个名为 toggle() 的函数，如下所示

function toggle(){
  $("#div1").fadeToggle(1000);
}

或者把你的js改成

$(document).ready(function(){
 $("img").click(function(){
  $("#div1").fadeToggle(1000);
 });
});

在这种情况下，您不需要<img> 中的toggle() 函数和onclick="toggle();" 处理程序

【讨论】：