Curious behaviour of clickable image

[chriseccles]

This is driving me up the wall !
-
I display an image with:

<img src="../Images/help.png" onClick="javascript:window.open('../Page/HELP/loginHelp.html','', 'width=300 height=300 resizable=no toolbar=no')"/>

and this brings up a small 'help' window, designated by the relative URL.
I use these all over my sites with absolutely no problems at all.

Except that it won't work on one particular page when the code sits inside
one particular <div> !

For example:

<div class="mainPanel">
  <div class="titlePanel">
    <p>Please LOGIN using your User name and Password:</p>
  </div> <!-- end titlePanel -->
	
  <div class="fullForm">
    <form name="loginForm">
      <label>User Name: </label>
      <input id="firstResponder" name="userName" type="text" size="32" maxlength="16" />
      <label>Password: </label>
      <input id="passWord" name="passWord" type="password" size="32" maxlength="16" />
      <div class="centeredButton">
        <input type="submit" name="submitForm" value="* LOGIN *"/>
      </div> <!-- end centeredButton -->
    </form>  <!-- end loginForm -->      
  </div>  <!-- end fullForm -->      
</div> <!-- end mainPanel -->
<img src="../Images/help.png" onClick="javascript:window.open('../Page/HELP/loginHelp.html','','width=300 height=300 resizable=no toolbar=no')"/>

works as expected.

Whereas:

<div class="mainPanel">
  <div class="titlePanel">
    <p>Please LOGIN using your User name and Password:</p>
  </div> <!-- end titlePanel -->
	
  <div class="fullForm">
    <form name="loginForm">
      <label>User Name: </label>
      <input id="firstResponder" name="userName" type="text" size="32" maxlength="16" />
      <label>Password: </label>
      <input id="passWord" name="passWord" type="password" size="32" maxlength="16" />
      <div class="centeredButton">
        <input type="submit" name="submitForm" value="* LOGIN *"/>
      </div> <!-- end centeredButton -->
    </form>  <!-- end loginForm -->      
  </div>  <!-- end fullForm --> 
<img src="../Images/help.png" onClick="javascript:window.open('../Page/HELP/loginHelp.html','','width=300 height=300 resizable=no toolbar=no')"/>   
</div> <!-- end mainPanel -->

doesn't work.

Very strange.

Chris

[jamesbcox1980]

The script works fine for me in FF 5, Chrome 12 and IE7, 8, & 9. I suspect the problem is something else on the page that's not shown here.

However, some things to note:

The onlick attribute of an HTML tag is javascript, so don't put "javascript:" in front of it. That's to tell the browser to handle a URL as javascript, and should be used in the HREF of links or in the address bar. Also "onclick" is all lower case and the width=300, height=300 etc should be separated by comma (not important, just picky).

<img src="../Images/help.png" onclick="window.open('../Page/HELP/loginHelp.html','','width=300,height=300,resizable=0,toolbar=0')" />