mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 23:51 Benutzername: Passwort: Auto-Login

Thema: javascript: warum ist der mauszeiger versetzt? vom 18.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> javascript: warum ist der mauszeiger versetzt?
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?

Antworten mit Zitat Zum Seitenanfang

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>&nbsp;</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>
  View user's profile Private Nachricht senden
easteregg

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht: Männlich
Verfasst Do 18.02.2010 14:18
Titel

Antworten mit Zitat Zum Seitenanfang

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)
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Tanerowski
Threadersteller

Dabei seit: 18.02.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 18.02.2010 14:58
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Esateregg,
hier ist der Link, dann siehst Du, was ich meine.
http://www.buerofraeulin.de/h/bio/schoko.html
Ich hoffe, Du kannst mir helfen.....
  View user's profile Private Nachricht senden
 
Ä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)
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.