Bild vergrößern bei mouseover

[gegenwind]

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!

 

[behemoth65]

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

 

[lachender_engel]

AW: Bild vergrößern bei mouseover

Du meinst eine Art Lupe?

 

[gegenwind]

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]

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]

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.

 

[LukasB]

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

 

[gegenwind]

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.

 

[lachender_engel]

AW: Bild vergrößern bei mouseover

Hast du den Anfangspost schon gelesen?

Ich finde das merkwürdig; Wenn ich über ein Bild hover und sich dann das große Bild darüber legt wie kann ich dann das Bild bewegen :?:

 

[gegenwind]

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.

 

[Chriss1987]

AW: Bild vergrößern bei mouseover

Hi,

das was du suchst sind ToolTips, glaube ich...
Hier z.B. ein PlugIn für jQuery

HTH
Schöne Grüße aus dem Sauerland!
Chriss

 

[behemoth65]

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.

 

[lachender_engel]

AW: Bild vergrößern bei mouseover

Ahhhh... Der Fragesteller meint wohl das Bild an den Mauszeiger "zu tackern". Es bewegt sich sich dann mit dem Mousezeiger mit.
Ich habe daszu das Skript hier genommen:
Wirklich einfache JavaScript Tooltips
Der Link kann da natürlich auch Dein Thumbnail sein.

 

[gegenwind]

AW: Bild vergrößern bei mouseover

Ahhhh... Der Fragesteller meint wohl das Bild an den Mauszeiger "zu tackern". Es bewegt sich sich dann mit dem Mousezeiger mit.
Ich habe daszu das Skript hier genommen:
Wirklich einfache JavaScript Tooltips
Der Link kann da natürlich auch Dein Thumbnail sein.

Man muss nur wissen, wonach man suchen muss!
Vielen, vielen Dank - danach habe ich gesucht…

 

[gegenwind]

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]

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.

 

[gegenwind]

AW: Bild vergrößern bei mouseover

Mein Problem: Ich kann kein JavaScript :-/