var rules = {
    '.key' : function(e) {
      e.onmousedown = function() {
        img = $(e).style.backgroundImage
        if(!img)
              img = document.defaultView.getComputedStyle(this, "").getPropertyValue("background-image")
              name = img.split('.png')
              new_src = name[0] + '_selected.png' + name[1]
              $(e).style.backgroundImage = new_src                       
      },
      e.onmouseout = function() {
                  img = $(e).style.backgroundImage
                  if(!img)
                    img = document.defaultView.getComputedStyle(this, "").getPropertyValue("background-image")
                    if(img.match('_selected.png')) {
                      name = img.split('_selected')
                      new_src = name[0] + name[1]
                      $(e).style.backgroundImage = new_src                       
                    }
                  },
      e.onmouseup = function() {
                        img = $(e).style.backgroundImage
                        if(!img)
                                        img = document.defaultView.getComputedStyle(this, "").getPropertyValue("background-image")
                    if(img.match('_selected.png')) {
                      name = img.split('_selected')
                      new_src = name[0] + name[1]
                      $(e).style.backgroundImage = new_src                       
                    }
                  }
          }
}