HTML - calling javascript by clicking on image

Question

I'm trying to call javascript by clicking on the image but it's not working.
Please refer below for my code.

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>

my code

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

Freesnöw · Accepted Answer · 2012-05-14 08:42:17Z

1

Check out this JSFiddle I made:

http://jsfiddle.net/Q5asp/

I changed the link at the bottom to properly hide it. The problem was that when you used Login('show') it was trying to access your form because it was the same name. You must make sure that your function name and names don't conflict.

edited May 14, 2012 at 8:42

answered May 14, 2012 at 8:25

Freesnöw

32.6k31 gold badges94 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jukka K. Korpela · Accepted Answer · 2012-05-14 09:00:05Z

1

Remove the attribute name="login" from the form tag. It now pollutes the name space so that the JavaScript interpreter takes the name login as referring to the form node rather than your function. (Firefox console error message says “login is not a function” for this reason.) – You can alternatively rename the form, but there’s normally no need for a name attribute for a form.

P.S. The edit you made to the question was wrong. Correct markup for a text that is to be clickable is <a onclick="login('hide');">close</a> (though for useability, it would be better to use a button).

answered May 14, 2012 at 9:00

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Collectives™ on Stack Overflow

HTML - calling javascript by clicking on image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related