Jquery
<font color="#FF0000">Mit so ´ner Formatierung sollte das eigentlich nicht rot werden!</font>xxxx
xxxxxx
xxxx
xxxxx
xxxxxxx
xxxxxx
xxxx
xxxxxx
xxxx
xxxxx
xxxxxxx
xxxxxx
xxxx
xxxx
xxxxxx
xxxx
xxxxx
xxxxxxx
xxxxxx
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>