hallo leute,
ich habe folgende Zoom-Funktion für ein Bild, funktioniert alles auch (könnt ihr euch kopieren und testen)... - NUR leider kriege ich keinen Rahmen um die Lupe hin. Wer kann helfen? danke im voraus!
------
<script language="JavaScript" type="text/javascript">
<!--
var ie = document.all:0;
var w3c = document.getElementById:0;
var ns4 = document.layers:0;
var smallWidth=600, smallHeight=849;
//var smallWidth=270, smallHeight=110; // Breite und Hoehe der kleinen Grafik 800 530
var smallLeft= 250, smallTop = 100;
var lensWidth = 136, lensHeight= 136;
var zoom = 2;
var lens, mouseX = 0, mouseY = 0, X, Y;
var leftClip, topClip, rightClip, bottomClip;
function intro() {
// Opera ab Version 7 ermitteln - unabhaengig von der eingestellten Identifizierung
if((window.opera) && !(navigator.userAgent.indexOf("7")!=-1)) {
alert("Die Lupe funktioniert leider erst mit Opera 7.");
return;
}
lens = (ie)?document.all.magnify.style
w3c)?document.getElementById("magnify").style:document["magnify"];
if(ns4) { document.captureEvents(Event.MOUSEMOVE); }
setInterval("cut()", 30);
document.onmousemove = pos;
}
function pos(e) {
if(!e) e = window.event; // Event-Definition fuer IE
mouseX = ((ns4)?e.pageX:e.clientX) - smallLeft;
mouseY = ((ns4)?e.pageY:e.clientY) - smallTop;
X = Math.round(mouseX * zoom);
Y = Math.round(mouseY * zoom);
leftClip = X - lensWidth /2;
topClip = Y - lensHeight /2;
rightClip = X + lensWidth /2;
bottomClip = Y + lensHeight /2;
}
function cut() {
if(mouseX > 0 && mouseX < smallWidth && mouseY > 0 && mouseY < smallHeight) {
lens.visibility = "visible";
if(ie||w3c) { // Fuer IE 5+, Mozilla, Netscape 6+ und Opera 7 // Clipping
lens.clip="rect(" + topClip + "px " + rightClip +"px "+ bottomClip +"px "+ leftClip +"px)";
lens.left = smallLeft - mouseX*(zoom-1) +"px";
lens.top = smallTop - mouseY*(zoom-1) + "px";
}
else if(ns4) { // Fuer NS 4
lens.clip.left = leftClip;
lens.clip.top = topClip;
lens.clip.right = rightClip;
lens.clip.bottom = bottomClip;
lens.left = smallLeft - mouseX*(zoom-1);
lens.top = smallTop - mouseY*(zoom-1);
}
}
else {
lens.visibility = "hidden";
}
}
imgarray = new Array(193,192,134,173,332,206);
var imgcnt = 0;
function changeImg(){
imgcnt++;
if (imgcnt >= imgarray.length) imgcnt = 0;
document.getElementById('bigimg').src = "./p0" + imgarray[imgcnt] + ".jpg"
document.getElementById('smallimg').src = "./p0" + imgarray[imgcnt] + ".jpg"
}
//-->
</script>
<body onload="intro()">
<div id="magnify" style="position: absolute; z-index: 3; visibility: visible; clip: rect(318px, 356px, 454px, 220px); left: 106px; top: -93px;">
<img src="pics/aml_kart_600x849.jpg" alt="" width="600" height="849" border="0" id="bigimg">
</div>
<div id="small" style="position: absolute; left: 250px; top: 100px; z-index: 1;">
<img src="pics/aml_kart_600x849.jpg" alt="" width="300" height="424" border="2" id="smallimg" title=""><br>
</div>
</body>
ich habe folgende Zoom-Funktion für ein Bild, funktioniert alles auch (könnt ihr euch kopieren und testen)... - NUR leider kriege ich keinen Rahmen um die Lupe hin. Wer kann helfen? danke im voraus!
------
<script language="JavaScript" type="text/javascript">
<!--
var ie = document.all:0;
var w3c = document.getElementById:0;
var ns4 = document.layers:0;
var smallWidth=600, smallHeight=849;
//var smallWidth=270, smallHeight=110; // Breite und Hoehe der kleinen Grafik 800 530
var smallLeft= 250, smallTop = 100;
var lensWidth = 136, lensHeight= 136;
var zoom = 2;
var lens, mouseX = 0, mouseY = 0, X, Y;
var leftClip, topClip, rightClip, bottomClip;
function intro() {
// Opera ab Version 7 ermitteln - unabhaengig von der eingestellten Identifizierung
if((window.opera) && !(navigator.userAgent.indexOf("7")!=-1)) {
alert("Die Lupe funktioniert leider erst mit Opera 7.");
return;
}
lens = (ie)?document.all.magnify.style
w3c)?document.getElementById("magnify").style:document["magnify"];if(ns4) { document.captureEvents(Event.MOUSEMOVE); }
setInterval("cut()", 30);
document.onmousemove = pos;
}
function pos(e) {
if(!e) e = window.event; // Event-Definition fuer IE
mouseX = ((ns4)?e.pageX:e.clientX) - smallLeft;
mouseY = ((ns4)?e.pageY:e.clientY) - smallTop;
X = Math.round(mouseX * zoom);
Y = Math.round(mouseY * zoom);
leftClip = X - lensWidth /2;
topClip = Y - lensHeight /2;
rightClip = X + lensWidth /2;
bottomClip = Y + lensHeight /2;
}
function cut() {
if(mouseX > 0 && mouseX < smallWidth && mouseY > 0 && mouseY < smallHeight) {
lens.visibility = "visible";
if(ie||w3c) { // Fuer IE 5+, Mozilla, Netscape 6+ und Opera 7 // Clipping
lens.clip="rect(" + topClip + "px " + rightClip +"px "+ bottomClip +"px "+ leftClip +"px)";
lens.left = smallLeft - mouseX*(zoom-1) +"px";
lens.top = smallTop - mouseY*(zoom-1) + "px";
}
else if(ns4) { // Fuer NS 4
lens.clip.left = leftClip;
lens.clip.top = topClip;
lens.clip.right = rightClip;
lens.clip.bottom = bottomClip;
lens.left = smallLeft - mouseX*(zoom-1);
lens.top = smallTop - mouseY*(zoom-1);
}
}
else {
lens.visibility = "hidden";
}
}
imgarray = new Array(193,192,134,173,332,206);
var imgcnt = 0;
function changeImg(){
imgcnt++;
if (imgcnt >= imgarray.length) imgcnt = 0;
document.getElementById('bigimg').src = "./p0" + imgarray[imgcnt] + ".jpg"
document.getElementById('smallimg').src = "./p0" + imgarray[imgcnt] + ".jpg"
}
//-->
</script>
<body onload="intro()">
<div id="magnify" style="position: absolute; z-index: 3; visibility: visible; clip: rect(318px, 356px, 454px, 220px); left: 106px; top: -93px;">
<img src="pics/aml_kart_600x849.jpg" alt="" width="600" height="849" border="0" id="bigimg">
</div>
<div id="small" style="position: absolute; left: 250px; top: 100px; z-index: 1;">
<img src="pics/aml_kart_600x849.jpg" alt="" width="300" height="424" border="2" id="smallimg" title=""><br>
</div>
</body>
