HTML - 通过点击图像调用javascript

Question

我试图通过点击图像来调用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> 

我的代码

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

Answer 1

看看这个的jsfiddle我做：

http://jsfiddle.net/Q5asp/

我改变了链接在底部适当隐藏它。问题在于，当您使用Login('show')时，它试图访问您的表单，因为它的名称相同。您必须确保您的函数名称和名称不冲突。

Answer 2

从form标记中删除属性name="login"。它现在污染了名称空间，因此JavaScript解释器将名称login称为表单节点而不是您的函数。 （出于这个原因，Firefox控制台错误消息显示“登录不是函数”。） - 您也可以重命名表单，但通常不需要表单的name属性。

P.S.你对这个问题的编辑是错误的。要点击的文本的正确标记为<a onclick="login('hide');">close</a>（尽管为了便于使用，最好使用按钮）。