Antworten auf deine Fragen:
Neues Thema erstellen

Bild vergrößern bei mouseover

gegenwind

liebt Pizza.

Hallo Leute,
ich suche schon seit gestern mindestens 4h an einem geeigneten Javascript-Script für meine Seite. Es ist nicht so, dass ich nicht schon etliche ähnliche Sachen gefunden habe, aber ich bin sehr detailverliebt und das hätte ich einfach gerne so…

Der Script muss nur folgendes können: Wenn man über das kleine Bild fährt, soll das größere Bild im Vordergrund erscheinen. Das größere Bild soll sich frei bewegen können und soll nicht im Container bleiben, sondern einfach im Vordergrund stehen. Das könnte ich jetzt in CSS machen, wenn ich nicht noch einen Wunsch hätte: Wenn man auf das Bild fährt, dann soll sich das Vorschaubild je nach Cursorposition verschieben.
Angenommen man hat den Cursor in der Mitte des kleinen Bildes, dann erscheint das große Bild genau darüber - wenn man den Cursor nun 1px nach rechts verschiebt, dann verschiebt sich das Vorschaubild auch um 1px nach rechts.
Das sieht man eigentlich recht häufig, nur jetzt will es mir irgendwie nicht mehr in die Augen springen.
Danke euch!
 

G

Gelöschtes Mitglied 133165

Guest

AW: Bild vergrößern bei mouseover

Ich weiss ungefähr was Du meinst, aber wenn Du es perfekt haben willst, verlink bitte mal eien Seite, die genau das macht, was Du meinst, das wäre hilfreich
 

gegenwind

liebt Pizza.

AW: Bild vergrößern bei mouseover

Ein Beispiel finde ich ja leider nicht mehr…

Nein, eine Lupe suche ich nicht. Man geht über das kleine Bild und es erscheint das große Bild und keine Detailaufnahme.
 

sokie

Mod | Web

AW: Bild vergrößern bei mouseover

detailverliebt sind wir auch, wenn es um scripting geht.
es wäre schon interessant zu erfahren, wie deine Bilder in der Seite untergebracht sind. hast du ein thumbnail, das vergrössert wird, indem es mit der grossen Version ausgetauscht werden soll, oder hast du das grosse Bild in die Seite(n) eingebunden und browserskaliert... - einfach ein link zu deinem Projekt (manchmal sind Lösungen dann erstaunlich einfach).
 

gegenwind

liebt Pizza.

AW: Bild vergrößern bei mouseover

Nee, ich habe ein thumbnail. bei hover soll der thumbnail nicht ausgetauscht werden. Das große Bild soll über dem kleinen Bild erscheinen.
 

gegenwind

liebt Pizza.

AW: Bild vergrößern bei mouseover

Bildergalerie mit Vergößerungseffekt
Eine einfache Erklärung die sich nach einer halben Minute Google findet. Demo gibts auch:
Bildergalerie

LG

Hast du den Anfangspost schon gelesen?
Das könnte ich jetzt in CSS machen, wenn ich nicht noch einen Wunsch hätte: Wenn man auf das Bild fährt, dann soll sich das Vorschaubild je nach Cursorposition verschieben.
Angenommen man hat den Cursor in der Mitte des kleinen Bildes, dann erscheint das große Bild genau darüber - wenn man den Cursor nun 1px nach rechts verschiebt, dann verschiebt sich das Vorschaubild auch um 1px nach rechts.
 

gegenwind

liebt Pizza.

AW: Bild vergrößern bei mouseover

Ich habe was gefunden:

Wenn ich den Cursor jetzt ein wenig nach rechts bewege, ist er ja immer noch auf dem thumbnail – und das Bild verschiebt sich genau um die Länge wie ich den Cursor verschoben habe.
 
G

Gelöschtes Mitglied 133165

Guest

AW: Bild vergrößern bei mouseover

man kann das auch mit Tooltips a la Spry relativ einfach verwirklichen, aber diese Anfordrung pixelweises Verschieben ist mir nicht geläufig und irgendwie fehlt mir auch der Sinn dafür.
 

gegenwind

liebt Pizza.

AW: Bild vergrößern bei mouseover

Ich melde mich mal zurück, weil dieser Script einen großen Nachteil hat.
Wenn ich Bilder am Rand hovere, dann ist das Vorschaubild außerhalb des Browserfensters. Bei wird das Problem perfekt gelöst – kennt jemand einen Script der genau so funktioniert wie der von fotolia?
 

cebito

undefined

AW: Bild vergrößern bei mouseover

Ich melde mich mal zurück, weil dieser Script einen großen Nachteil hat.
Wenn ich Bilder am Rand hovere, dann ist das Vorschaubild außerhalb des Browserfensters. Bei wird das Problem perfekt gelöst – kennt jemand einen Script der genau so funktioniert wie der von fotolia?
Einfach die function updateWMTT(e) um eine Abfrage erweitern -> wenn Mausposition+20px+Tooltipbreite größer screen.width, dann auf der anderen Seite des Mauszeigers einblenden.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben