www.webdeveloper.com
Results 1 to 2 of 2

Thread: Curious behaviour of clickable image

  1. #1
    Join Date
    May 2011
    Posts
    101

    Curious behaviour of clickable image

    This is driving me up the wall !
    -
    I display an image with:
    Code:
    <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:
    Code:
    <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:
    Code:
    <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

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    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).

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles