I am trying to open a larger image (BigImage.png) when I click a smaller image (SmallImage.gif) using JavaScript. Here is the code:

HTML

<td align="center"><a href="BigImage.png" onclick="OpenImage(this,event);" target="_blank"><img src="SmallImage.gif" width="196" height="131" border="0"></a></td>

JavaSript

    function OpenImage(element,e)
    {


      e.preventDefault();

      var img =  new Image();
      img.src = element.getAttribute("href");

      img.onload = function(){

      var left = (screen.width/2)-(img.width/2);
      var top = (screen.height/2)-(img.height/2)-25;

      var winWidth = img.width;
      var winHeight = img.height;

      var myWindow = window.open(img.src, "win1", 'height=' + winHeight + ', width=' + winWidth + ',left=' + left + ',top=' + top + ', location=0, toolbar=0, menubar=0, location=0, status=0, scrollbars=0, resizable=0'); 

      if(!myWindow )
       {
        alert("Please allow Popup Blocker to open window and click the image again.");
       }

    };
}

Google Chrome and Internet Explorer invoke pop up blocker when this piece of code is run. I am calling JS code as a result of direct click which should not invoke pop up blocker. Why is it happening and how can I rectify this issue?

Regards.

The reason it's setting off the popup blocker even though you are opening it in response to user click is that you are calling it from within img.onload, which is asynchronous, and will cause popup blocker to show. try calling window.open from outside the onload function, should work.