Bildlupe - komm mit Code nicht klar

[Felix Riesterer]

Liebe(r) Eiden,

sorry, aber diesen Namen kenne ich nicht, daher kann ich nicht sicher auf das Geschlecht schließen. Daher das (r) in der Anrede.

http://www.alternate.de/html/product/Grafikkarten_NVIDIA_PCIe/Sparkle/GF9800GTX+/278349/?tn=HARDWARE&l1=Grafik&l2=Karten+PCIe&l3=NVIDIA
[...]
Jetzt wollt ich fragen, ob mir einer erklären könnte wie so etwas gemacht wird

Gerne!

Hier wird (ohne den Code untersucht zu haben) ein Block-Element mit einem größeren Bild befüllt. Das Block-Element (z.B. <p> oder <div>) wird dann absolut positioniert (das ginge auch anders), wobei es (mittels der CSS-Eigenschaften height und width) eine feste Höhe und eine feste Breite bekommt. Außerdem wird das Anzeigen von über diesen Bereich hinausragenden Inhalten mittels overflow:hidden unterbunden. Das größere Bild wird mittels position:relative positioniert, damit später mittels der CSS-Eigenschaften top und left die Position "verrutscht" werden kann. Durch das overflow:hidden sieht man nur einen Ausschnitt daraus.

Das Überfahren des Vorschaubildes wird mittels onmouseover abgefangen und dann die Koordinaten der Maus ermittelt (clientX und clientY). Von diesen Koordinaten muss noch die absolute Position des Vorschaubildes abgezogen werden, um die Koordinaten innerhalb des Bildes zu ermitteln. Dann können die aktuellen Koordinaten benutzt werden, um das große Bild innerhalb des Block-Elementes neu zu positionieren (x-Koordinaten werden "left" hinzuaddiert, die y-Koordinaten entsprechend "top"). Natürlich dürfen die Eigenschaften "top" und "left" keinesfalls unter die null rutschen, und ebenso dürfen sie den Maximalwert nicht überschreiten, der sich errechnet aus Bildbreite - BlockElementWidth.

Wenn jemand Lust hätte, könnte er mir seine ICQ bzw. MSN Nummer Mailen.
Dann müsste ich nicht immer wegen kleinen Problemen einen Threat verfassen.

Du sollst nicht drohen!

Du darfst natürlich hier Deine Versuche und Teilerfolge posten, damit man Dir bei der Erstellung eines passenden Scripts weiterhelfen kann.

Lass Dir aber gesagt sein, dass diese Lupe sehr nerven kann! Als ich die Seite aufrief, konnte das Bild in der Lupe nicht sofort angezeigt werden (es lud etwas länger), was mich zuerst etwas irritiert hat - und sicher nicht nur mich. Im Übrigen fände ich eine direkte Verlinkung des großen Bildes weniger barrierebehaftet. Du kannst Dir ja mal meine Lösung für sowas anschauen...

Liebe Grüße,

Felix Riesterer.