HTML-通过单击图像调用javascript

我试图通过单击图像调用javascript，但它不起作用。
请参考下面的代码

Javascript

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/Image_1.png"
var image2=new Image()
image2.src="images/Image_2.png"
var image3=new Image()
image3.src="images/Image_3.png"
//-->

  function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible";
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; 
    }
  }
  </script>

函数登录（显示隐藏）{
如果（显示隐藏=“显示”）{
document.getElementById（'popubox'）.style.visibility=“visible”；
}else if（showhide==“hide”）{
document.getElementById（'PopuBox'）.style.visibility=“hidden”；
}
}

我的代码

<div id="apDiv21"><img src="images/Login_OnOut.png" width="71" height="44" 
onmouseover="this.src='images/Login_OnRollover.png'" 
  onmouseout="this.src='images/Login_OnOut.png'" onclick="login('show');" />

  <div id="popupbox"> 
<form name="login" action="" method="post" style="background-color:#C7C7C7">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<center><a href="login('hide');">close</a></center> 
</div> 

用户名：
密码：

查看我制作的JSFIDLE：

---

我更改了底部的链接以正确隐藏它。问题是，当您使用

Login（'show'）

时，它试图访问您的表单，因为它的名称相同。您必须确保函数名和名称不冲突。

从

表单

标记中删除属性

name=“login”

。它现在污染了名称空间，因此JavaScript解释器将名称

login

视为引用表单节点而不是函数。（由于这个原因，Firefox控制台错误消息说“登录不是一个函数”）–您也可以重命名表单，但通常不需要表单的

名称
属性

另外，你对问题的编辑是错误的。要单击的文本的正确标记是
close
（不过为了便于使用，最好使用按钮）