I have been given the following code to implement:

<script type="text/javascript">

  $(document).ready(function(){
    $('.hotspots a').bind('mouseover click', function() {
      $this = $(this);
      if($('.hotspot-target').data('hotspot')!=$this.attr('href')) {
        $('.hotspot-target').data('hotspot', $this.attr('href'));

        $('.hotspot-target').fadeOut(100, function() {
          $('.hotspot-target').css({backgroundImage: 'url('+$this.attr('href')+')'});
          $('.hotspot-target .detail').hide();
          $('.hotspot-target .detail.'+$this.attr('class')).show();

          $('.hotspot-target').fadeIn(100);
        });
      }
      return false;
    })
  });
</script>

It works fine in FF and Chrome with no errors in the console. I also can't see any errors in the IE debugger, though I'm not so used to how that works.

Is there anything obviously wrong with the above code? It's placed at the end of the page