window.addEvent('domready', function(){
  color01 = $$('.area01').getStyle('backgroundColor');
  color02 = $$('.area02').getStyle('backgroundColor');
  
  $$('.area01').addEvents({
    mouseenter: function(){
      // Change background color on mouseover
      this.morph({
        'background-color': '#D9D9D9',
        'background-image': 'url(DGM/img/overview_arrow_dgm.png)', //Background image
        'background-repeat': 'no-repeat',
        'background-position': [0, 740] //image will move from left to right - Values are in pixels.
      });
   	},
    mouseleave: function(){
      // Morphes back to the original style
      this.morph({
        'background-image': 'none',
        backgroundColor: color01
      });
    }
  });
  
  $$('.area02').addEvents({
    mouseenter: function(){ 
      // Change background color on mouseover
      this.morph({
        'background-color': '#D9D9D9',
        'background-image': 'url(DGM/img/overview_arrow_dgm.png)', //Background image
        'background-repeat': 'no-repeat',
        'background-position': [0, 740] //image will move from left to right - Values are in pixels.
      });
    },
    mouseleave: function(){
      // Morphes back to the original style
      this.morph({
        'background-image': 'none',
        backgroundColor: color02
      });
    }
  });
});