jQuery().ready(function(){

  xOffset = 10;
  yOffset = 30;

  $(".preview").mouseover(function(e){

    this.affichage = $(this).next("div").html();

		$("body").append("<div id='screenshot'>"+this.affichage+"</div>");
		$("#screenshot")
			.css("top",(e.pageY + xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");

  }).mouseout(function(){
    $("#screenshot").remove();
  });

	$(".preview").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY + xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});
	
	
	
	
  $("map.previewAccueil area").mouseover(function(e){
  
    position = $("area").index( $(this)[0] );
  
    this.affichage = $("#imageAccueil" + position).html();
    
		$("body").append("<div id='screenshotAccueil'>"+this.affichage+"</div>");
		$("#screenshotAccueil")
			.css("top",(e.pageY + xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");
			
  }).mouseout(function(){
    $("#screenshotAccueil").remove();
  });
	$("map.previewAccueil area").mousemove(function(e){
		$("#screenshotAccueil")
			.css("top",(e.pageY + xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});
	
});
