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>です（ただし、使い勝手の面ではボタンを使用する方が良いでしょう）。