[FRAGE] Bild bewegen lassen

[Mikonoru]

Hallo Leute

Ich bin gerade dabei eine website zu schreiben und habe grade bei einer sache ein problem...

da ich mich nicht allzu gut mir javasript auskenne bitte ich euch mit evtl hilfe zu geben...

also bei einer Bildergalerie habe ich dadrunter zwei Bilder die als "Bild vor" und "Bild zurück" dienen diese sind ein Pfeil links und ein Pfeil rechts als eine png Datei. diese möchte ich animieren lassen sobald man mit dem Mauszeiger rauf geht. die Animation sollte so sein das das bild evtweder einmal kurz nach links oder nach rechts geht (jenachdem welcher Pfeil das ist) und wieder runter das solange wie der Mauszeiger auf dem bild ist.

ich hoffe das sind ausreichend Informationen wenn nicht bitte fragen was ich braucht..

lg Mikonoru

 

[SteelWheel]

Moinsen - und Willkommen hier im Forum.

Du hast zwei Möglichkeiten dies zu machen: JavaScript oder CSS.

Wenn Du JavaScript nimmst, verschiebst Du mittels Eventhandler (onmouseover) Deine Grafik in der Position um N px nach links bzw. rechts (N = natürliche, ganze Zahl). Der Eventhandler "onmouseout" setzt die ursprüngliche Angabe wieder. Ich empfehle Dir hier, dass Du einen Bereich nimmst, der größer als die Grafik selbst ist, damit man nicht aufgrund der Bewegung "abrutscht" und die Grafik sich direkt wieder selbst zurücksetzt (= ungewünschter "onmouseout").

Ferner könntest Du via JavaScript CSS-Klassen anhängen, die die Position korrigieren. Ist ähnlich dem ersten Vorschlag (mind. etwas schöner).

Zuguterletzt kannst Du auch "Spriting" verwenden - hierbei sind beide Zustände in einer Grafik festgehalten; das CSS verschiebt - je nach Zustand - die Ansicht dieser Grafik auf der x- bzw. y-Achse. Durch die Vordefinition eines "sichtbaren Bereiches" emulierst Du Veränderung (weil das menschliche Auge es nicht derart schnell wahrnimmt). Deine Pfeile lassen sich auf diese Weise auf einen Request an den Server reduzieren - inkl. des Spritings. Schön hierbei ist, dass Du auch die Pfeile mit "onmouseover" umfangreicher gestalten kannst als nur mit "px-Versatz nach links/rechts".

Ich hoffe, dass Dir das als Denkanstoß ein wenig hilft.

Grüße und gute Nacht.

 

[Mikonoru]

Danke für deine Antwort

Hättest du lust mir ein beispiel quellcode zu geben