Bildlupe - komm mit Code nicht klar

[Eiden]

Hi Leute,

Ich hoffe das meine Fragen euch nicht schon auf den Geist gehen :=).

Problem:

Ich will gerne in meine Homepage eine Bildlupe einbauen, die kleine Bilder
neben drann vergrößert. Es soll keine richtige Lupe sein die auf dem Bild
direkt die Vergrößerung darstellt, sondern daneben.
Ich hab auch schon konkrete Vorstellungen wie sowas ausschauen könnte:

http://www.alternate.de/html/product/Grafikkarten_NVIDIA_PCIe/Sparkle/GF9800GTX+/278349/?tn=HARDWARE&l1=Grafik&l2=Karten+PCIe&l3=NVIDIA

Wenn man seine Maus auf das Bild fährt, erscheint eine "Lupe" bei der das Bild vergrößert dargestellt wird. Das ganze ist allerdings verschoben, was ich sehr nett finde. Ich hab mich auch schon in den Text eingelesen, aber meine Java Script Kentnisse sind...(Html und CSS gehen).

Jetzt wollt ich fragen, ob mir einer erklären könnte wie so etwas gemacht wird, bzw. von Javascripten direkt den Code oder seeehhhhhr ausführliche Anweisungen geben könnte.

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.
(HTML - CSS - JAVASCRIPT)
(ich google natürlich trotzdem noch^^)

Schon mal danke im Vorraus für die Hilfe
mfg Eiden

[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.

[Eiden]

Danke Felix!
Ich werde deinen Ratschlag beherzigen und dein Script in meine Seite einbauen!
Wahrscheinlich ist das auch die bessere Methode und das ganze ist vor allem einfacher!

mfg Eiden(männlicher Nick^^)

[bleicher]

Grüße,
wäre die "lupe" denn nicht mit reinen cssmitteln und einem Bild lösbar?
:hover über Links würde gar IE, diese Ausgburt eines vom Camel geschwängerten Papageis, interpretieren.
MFG
bleicher

[Felix Riesterer]

Lieber bleicher,

wäre die "lupe" denn nicht mit reinen cssmitteln und einem Bild lösbar?

nicht, wenn sich bei veränderter Mausposition der Bildausschnitt entsprechend mitbewegen soll. Diese Animation ist so in CSS alleine nicht möglich.

:hover über Links würde gar IE, diese Ausgburt eines vom Camel geschwängerten Papageis, interpretieren.

Die frage ist nur wie? Nachplappern oder spucken?

Liebe Grüße,

Felix Riesterer.

[bleicher]

Grüße,

Die frage ist nur wie? Nachplappern oder spucken?

nachplappern für browser oder spucken für die magenverstimmung der alten hyene? nun - man erzählte mir hier von unheimlichen vorteilen des letzteren - wen der schon sogut dran ist, braucht man den nicht extra zu berücksichtigen ;)

MFG
bleicher