title: adding onMouseUp & onMousedown events -- inside javascript function
body: <p>I am having an div &amp; inside it their is an input image with <code>ID="Area-Light"</code>.<br>
  Now here i am passing the id of the input image to a function.</p>
  
  <p>I know we can directly add event handlerd inside the input tag. But i want to do it inside a javascript code.<br>
  Why the event handlers of image <code>onMouseDown</code> &amp; <code>onMouseUp</code> are <code>not working</code> ?<br>
  When i press image their is no alert popup</p>
  
  <pre><code>&lt;html&gt;
  &lt;script type="text/javascript" src="../lib/mylib.js"&gt;&lt;/script&gt;
  &lt;body&gt;
          &lt;div class="Area"&gt;
              &lt;input id="Area-Light" type="image" src="http://www.psdgraphics.com/file/glossy-light-bulb.jpg" /&gt;
              &lt;p class="imgtxt" "&gt;Area-Light&lt;/p&gt;
          &lt;hr/&gt;
  
  &lt;script type="text/javascript" &gt;
  var btn1 = new my_stateButton( "Area-Light");              // Button type
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now this function is inside mylib.js , i am adding the event handlers for <code>onMouseDown</code> &amp; <code>onMouseUp</code> events of image  :--</p>
  
  <pre><code>function my_stateButton(   canvasName )
  {
      this.canvas = document.getElementById(canvasName);
  
      this.canvas.onmousedown = this.onMouseDown.bind(this);
      this.canvas.onmouseup = this.onMouseUp.bind(this);
  
  
      // Do some work
  };
  </code></pre>
  
  <p>Evevnt functions :--</p>
  
  <pre><code>my_stateButton.prototype.onMouseDown = function() 
  {
     alert('down');
  };
  
  
  my_stateButton.prototype.onMouseUp = function() 
  {
     alert('up');  
  };
  </code></pre>