title: Jquery add mouseup and mousedown event on several images
body: <p>I am trying to add a mouseup, mousedown, hover event on several different images - the only problem is that the event only occurs on the first image, 
  tried using the each() function does not seem to be working.
  Any suggestions on how I can do this?</p>
  
  <pre><code>    $(function() {
  
  var filename = $('.imgover').attr('alt');
  
  $('.rolloverimg').each(function(){
     $('#'+ filename).mouseup(function(){
        $(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_up.png' );
      }).mousedown(function(){
        $(this).children("img").attr('src','content/images/buttons/' + filename + '_down.png');
      });
  
      $('#'+ filename).hover(
        function () {
          $(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_hover.png');
        },
        function () {
          $(this).children("img").attr('src', 'content/images/buttons/' + filename + '_up.png');
        }
      );
  });
  
  });
  
  &lt;div class="hdr-btns rolloverimg"&gt;
        &lt;a href="#"&gt;&lt;img src="content/images/buttons/play_up.png" alt="play" id="play"  class="imgover" /&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;img src="content/images/buttons/register_up.png" alt="register" id="register"  class="imgover" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>