Jquery

xxxx

xxxxxx
xxxx

xxxxx
xxxxxxx
xxxxxx
xxxx

xxxx

xxxxxx
xxxx

xxxxx
xxxxxxx
xxxxxx
xxxx

<script type="text/javascript">
$(document).ready(function()
{
	IsLoaded = 0;

	$("#Lupe1_kl").click(function()
	{
		IsLoaded = 1;
		$("#Lupe1_full").attr({style:"background:url(../img/Marienstein.jpg) no-repeat;background-size:3904px 2592px;width:488px;height:324px"});
		$("#Lupe1").attr({style:"width:488px;position:relative;cursor:crosshair"});
		$("#Lupe1_alt").fadeOut("fast");
	})

	$("#Lupe1_area").click(function()
	{
		IsLoaded = 0;
		$("#Lupe1_area").fadeOut("slow");
		$("#Lupe1_full").fadeOut("slow");
		$("#Lupe1").attr({style:"width:488px;position:relative;cursor:pointer"});
		$("#Lupe1_alt").delay(800).fadeIn("slow");
	})

	$("#Lupe1").mousemove(function(Pos)
	{
		var relX = Pos.pageX - $(this).offset().left;
		var relY = Pos.pageY - $(this).offset().top;
		if( ($(this).width()/16 < relX && relX < $(this).width()*(1-1/16)) && ($(this).height()/16 < relY && relY < $(this).height()*(1-1/16)) )
		{
			if(IsLoaded)
			{
				$("#Lupe1_alt").fadeOut(1);
				$("#Lupe1_area").fadeIn();
				$("#Lupe1_full").fadeIn();
			}
		}
		else
		{
			$("#Lupe1_area").fadeOut("slow");
			$("#Lupe1_full").fadeOut(1);
			$("#Lupe1_alt").fadeIn("slow");
		}
		if($("#Lupe1_area").is(":visible"))
		{
			var pw = $("#Lupe1_area").width()/2;
			var ph = $("#Lupe1_area").height()/2;
			var px = relX - pw;
			var py = relY - ph;
			var grw = Math.round(8*pw - relX/$("#Lupe1_kl").width() * $(this).width() * 8);
			var grh = Math.round(8*ph - relY/$("#Lupe1_kl").height() * $(this).height() * 8);
			var pos = grw + "px " + grh + "px";
			$("#Lupe1_area").css({left: px, top: py, backgroundPosition: pos});
			$("#Lupe1_full").css({left: 0, top: 0, backgroundPosition: pos});
		}
	})
})
</script>
<noscript>
<p>Bitte Javascript einschalten</p>
</noscript>
<div id="Lupe1" class="Lupe">
<img id="Lupe1_kl" src="/img/Marienstein.kl.jpg" width="488" height="324" alt="Marienstein">
<div id="Lupe1_area" class="Lupe_area" style="width:61px;height:41px"><img src="../img/dot.red.gif" id="Lupe1_bg" class="Lupe_bg" width="61" height="41" alt="Lupe"></div>
</div>
<div id="Lupe1_alt" class="Lupe_alt">xxxx<br><br>xxxxxx<br>xxxx<br><br>xxxxx<br>xxxxxxx<br>xxxxxx<br>xxxx</div>
<div id="Lupe1_full" class="Lupe_full" style="width:488px;height:324px"><img src="../img/dot.gif" class="Lupe_detail" width="488" height="324" alt="Detail"></div>