function show_active_area(x_posn, y_posn) {
  $("#active_area").addClass('loading');
  $("#active_area").css({'top' : y_posn-300 + "px"}); 
  $("#active_area").css({'left' : x_posn + 100}); 
  $("#active_area").css("display", "block");

}

function hide_active_area () {
  $("#active_area").removeClass('loading');
  $("#active_area").css("display", "none");
  $("#active_area").html('');
}

$(document).ready(function() {


 $(".prod_list_attr_link").mouseout(function(){
  hide_active_area();
});

 $(".prod_list_attr_link").mouseover(function(){

//Get position of calling hyperlink
  var y_offset = $(this).offset().top;
  var x_offset = $(this).offset().left;
  show_active_area(x_offset, y_offset);

  var attr_img = $(this).attr('title');


  var img = new Image();
  $(img)
  .load(function () { 
      // with the holding div #loader, apply:
      $('#active_area')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .html(this);
    
      // fade our image in to create a nice effect
      $(this).fadeIn('slow');
  });
  


    $(img).attr('src', 'wig_wigs/options/' + attr_img);

   $(img).css('width', 300);
   $(img).css('height', 400);



  }); 

});