Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Tanerowski
Threadersteller
Dabei seit: 18.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 18.02.2010 13:40
Titel javascript: warum ist der mauszeiger versetzt? |
|
|
Hallo!
Ich hoffe, es kann mir jemand helfen. Wenn man auf das Bild mit dem Mauszeiger geht, zeigt eine Lupe eine Vergrößerung des Bildes an. Woran liegt es, dass bei dem Bild (unten.jpg)
der Mauszeiger nach links versetzt ist? Eigentlich ist der Lupenausschnitt direkt mittig über dem Mauszeiger.
Ich kenne mich mit Javascript nicht sooo gut aus und bin schon am verzweifeln.
Wenn ich folgenden Part
<div id="magnify" style="position:absolute; left:auto; top:auto; visibility:hidden; z-index:3;">
<img id ="bigimg" src="../images/schoko/unten_gross.jpg" width="917" height="627" alt="vier Sorten" title="" />
</div>
<div id="small" style="position:absolute; left:220px; top:166px; z-index:1;">
<img id ="smallimg" src="../images/schoko/unten.jpg" width="436" height="298" alt="vier Sorten" title="" />
</div>
aus dem "main" div rausnehme funktioniert alles bestens.
Hier ist der Code:
<head>
<body onLoad="intro()" bgcolor="#FFFFCC">
<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>
<script type="text/javascript">
<!--
/////////////////////////////////////////////////////////////////////// Besten Dank an www.internet-pro.de
var ie = document.all?1:0;
var w3c = document.getElementById?1:0;
var ns4 = document.layers?1:0;
var smallWidth=436, smallHeight=298; // Breite und Hoehe der kleinen Grafik
var smallLeft= 220, smallTop = 166; // Position der kleinen Grafik
var lensWidth = 100, lensHeight= 100; // Breite und Hoehe der Lupe
var zoom = 2; /* Jeder Faktor ist moeglich, wenn Breite und Hoehe der grossen
und kleinen Grafik im gleichen Verhaeltnis referenziert werden */
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) { // Mausposition und Clipping-Werte berechnen
if(!e) e = window.event; // Event-Definition fuer IE
mouseX = ((ns4)?e.pageX:e.clientX) - smallLeft; // Mausposition innerhalb der
mouseY = ((ns4)?e.pageY:e.clientY) - smallTop; // kleinen Grafik ermitteln
X = Math.round(mouseX * zoom); // Umrechnen der Mausposition
Y = Math.round(mouseY * zoom); // auf grosse Grafik
leftClip = X - lensWidth /2; // Clipping-Werte
topClip = Y - lensHeight /2; // fuer die grosse Grafik
rightClip = X + lensWidth /2;
bottomClip = Y + lensHeight /2;
}
function cut() { // Clipping und Verschieben der grossen Grafik
if(mouseX > 0 && mouseX < smallWidth && mouseY > 0 && mouseY < smallHeight) {
lens.visibility = "visible"; // Grosse Grafik sichtbar machen
if(ie||w3c) { // Fuer IE 5+, Mozilla, Netscape 6+ und Opera 7 // Clipping
lens.clip="rect(" + topClip + "px " + rightClip +"px "+ bottomClip +"px "+ leftClip +"px)";
// Grosse Grafik entsprechend der Mausposition verschieben
lens.left = smallLeft - mouseX*(zoom-1) +"px";
lens.top = smallTop - mouseY*(zoom-1) + "px";
}
else if(ns4) { // Fuer NS 4
lens.clip.left = leftClip; // Clipping
lens.clip.top = topClip;
lens.clip.right = rightClip;
lens.clip.bottom = bottomClip;
lens.left = smallLeft - mouseX*(zoom-1); // Grosse Grafik entsprechend
lens.top = smallTop - mouseY*(zoom-1); // der Mausposition verschieben
}
}
else {
lens.visibility = "hidden"; // Grosse Grafik unsichtbar machen
}
}
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>
</head>
<div id="main" style="position:absolute; width:737px; height:496px; margin-left:-370px; left:50%; top:9%; z-index:1; visibility: visible">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14%" height="67" align="left" valign="top"><a href="../index.html" target="_self"> <!-- uninteressant--></a><br />
<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- uninteressant-->
</table>
</td>
<td width="1%"><img src="../blind.gif" width="1" height="163" /></td>
<td width="85%" align="center" valign="top"> <!-- uninteressant--></td>
</tr>
<tr>
<td colspan="3"><img src="../images/linie.gif" width="737" height="2" /></td>
</tr>
<tr>
<td align="left" valign="top"><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- uninteressant-->
</table>
<img src="../images/herz.gif" alt="Herz" width="67" height="239" />
</td>
<td> </td>
<td><div id="magnify" style="position:absolute; left:auto; top:auto; visibility:hidden; z-index:3;">
<img id ="bigimg" src="../images/schoko/unten_gross.jpg" width="917" height="627" alt="vier Sorten" title="" />
</div>
<div id="small" style="position:absolute; left:220px; top:166px; z-index:1;">
<img id ="smallimg" src="../images/schoko/unten.jpg" width="436" height="298" alt="vier Sorten" title="" />
</div></td>
</tr>
</table>
</div>
</body>
</html>
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 18.02.2010 14:18
Titel
|
|
|
a) Den <body> öffnet man erst, nachdem der <head> geschlossen wurde!
b) Lad dein Beispiel mal wo hoch, damit man einfach sehen kann, wo was wie nicht geht
c) Ggf. ist cursor: url(); im CSS eine Alternative für dich (Kompatiblitätschart)
|
|
|
|
|
Anzeige
|
|
|
Tanerowski
Threadersteller
Dabei seit: 18.02.2010
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
|
|
|
Ähnliche Themen |
[javascript] mauszeiger ausblenden
css bild ist versetzt in IE
Firefox zeigt <div> versetzt an
header versetzt im IE Hilfe!
[solved]Pop up wird versetzt dargestellt
CSS float versetzt <div> nach innen (firefox)
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|